menu
Channels
Team

Trouble with a third party integration

June 3, 2019 at 12:29am

Trouble with a third party integration

June 3, 2019 at 12:29am

Hoping someone can help me debug this... here's a PR for styled-components where I'm trying to integrate the "Chromatic" service as a sail job: https://github.com/styled-components/styled-components/pull/2589/checks?check_run_id=140281623

I can confirm it works locally, just for some reason in CI either storybook isn't launching or the self-request to localhost from chromatic doesn't work. Any ideas?


June 3, 2019 at 5:47pm

Hi @probablyup. I pulled down your branch and it wouldn't work for me locally. I couldn't even start Storybook until I made the following change on this line - https://github.com/sailci/styled-components/blob/29adeb8e954d8babdebdccc2312dbfca62516963/packages/styled-components/.storybook/examples.js#L3

import styled, { createGlobalStyle, css, keyframes, ThemeProvider, withTheme } from '../src';

That got Storybook working but then Chromatic was giving this error:

Chromatic Tester: Detected 'storybook' script, running with inferred options:
--script-name=storybook --storybook-port=6006
Override any of the above if they were inferred incorrectly.
Chromatic Tester: Starting storybook
Chromatic Tester: Started storybook at http://localhost:6006/iframe.html
Chromatic Tester: Opening tunnel to Chromatic capture servers
Chromatic Tester: Uploading and verifying build (this may take a few minutes depending on your connection)
Your app logged the following to the error console:
=========================
ReferenceError: __VERSION__ is not defined
at Module.<anonymous> (https://lnuwfjrgdj.tunnel.chromaticqa.com/main.51a6c6b072758ddcaa9e.bundle.js:770:18)
at Module../src/constants.js (https://lnuwfjrgdj.tunnel.chromaticqa.com/main.51a6c6b072758ddcaa9e.bundle.js:775:30)
at __webpack_require__ (https://lnuwfjrgdj.tunnel.chromaticqa.com/runtime~main.51a6c6b072758ddcaa9e.bundle.js:783:30)
at fn (https://lnuwfjrgdj.tunnel.chromaticqa.com/runtime~main.51a6c6b072758ddcaa9e.bundle.js:151:20)
at Module../src/sheet/Sheet.js (https://lnuwfjrgdj.tunnel.chromaticqa.com/main.51a6c6b072758ddcaa9e.bundle.js:2765:69)
at __webpack_require__ (https://lnuwfjrgdj.tunnel.chromaticqa.com/runtime~main.51a6c6b072758ddcaa9e.bundle.js:783:30)
at fn (https://lnuwfjrgdj.tunnel.chromaticqa.com/runtime~main.51a6c6b072758ddcaa9e.bundle.js:151:20)
at Module../src/sheet/index.js (https://lnuwfjrgdj.tunnel.chromaticqa.com/main.51a6c6b072758ddcaa9e.bundle.js:3200:64)
at __webpack_require__ (https://lnuwfjrgdj.tunnel.chromaticqa.com/runtime~main.51a6c6b072758ddcaa9e.bundle.js:783:30)
at fn (https://lnuwfjrgdj.tunnel.chromaticqa.com/runtime~main.51a6c6b072758ddcaa9e.bundle.js:151:20)
=========================
This may lead to some stories not working right or getting detected by Chromatic
We suggest you fix the errors, but we will continue anyway..

Hope this helps.

Edited
  • reply
  • like

Well you're totally right about that being needed... I wonder why it works locally for me 🤔

  • reply
  • like

Updated my message as I pressed "Send" too early 🙄

  • reply
  • like

@probablyup my theory is that locally you have transpiled the code to dist and then when importing from ../ it's reading the package.json and seeing that your main field is dist/styled-components.cjs.js.

  • reply
  • like