Gatsby: Gatsby 2.27.1 breaks Storybook

Created on 24 Nov 2020  ·  20Comments  ·  Source: gatsbyjs/gatsby

Description

Storybook crashes after updating Gatsby from 2.26.1 to 2.27.1 (and the various gatsby packages to their latest versions).

ERROR in ./node_modules/gatsby/cache-dir/ensure-page-component-in-bundle.js
Module not found: Error: Can't resolve '$virtual/lazy-client-sync-requires' in '/Users/PROJECT/node_modules/gatsby/cache-dir'
 @ ./node_modules/gatsby/cache-dir/ensure-page-component-in-bundle.js 30:29-82 33:25-70
 @ ./node_modules/gatsby/cache-dir/loader.js
 @ ./node_modules/gatsby/cache-dir/gatsby-browser-entry.js
 @ ./src/components/header.tsx
 @ ./src/components/header.stories.mdx
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(tsx|mdx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

Steps to reproduce

This is a brand new default Gatsby project with the default Header component added to Storybook.

This occurs with Storybook 6.x. I'm using 6.1.4.

Expected result

Storybook should not crash.

Actual result

Storybook crashes.

Environment

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.18.4 - ~/.nvm/versions/node/v12.18.4/bin/node
    npm: 6.14.8 - ~/.nvm/versions/node/v12.18.4/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 87.0.4280.67
    Firefox: 82.0.2
    Safari: 14.0
  npmPackages:
    gatsby: ^2.27.1 => 2.27.1
    gatsby-image: ^2.6.0 => 2.6.0
    gatsby-plugin-eslint: ^2.0.8 => 2.0.8
    gatsby-plugin-manifest: ^2.7.0 => 2.7.0
    gatsby-plugin-offline: ^3.5.0 => 3.5.0
    gatsby-plugin-postcss: ^3.2.0 => 3.2.0
    gatsby-plugin-purgecss: ^5.0.0 => 5.0.0
    gatsby-plugin-react-helmet: ^3.5.0 => 3.5.0
    gatsby-plugin-root-import: ^2.0.5 => 2.0.5
    gatsby-plugin-sharp: ^2.9.0 => 2.9.0
    gatsby-source-filesystem: ^2.6.1 => 2.6.1
    gatsby-transformer-sharp: ^2.7.0 => 2.7.0
  npmGlobalPackages:
    gatsby-cli: 2.14.0
needs reproduction bug
Source
picture sklawren

Most helpful comment

Looks like we'll need to alias the virtual module in Storybook's config.

In .storybook/main.js you can add:

config.resolve.alias[
  "$virtual/lazy-client-sync-requires"
] = require.resolve(`./__mocks__/virtual-lazy-client-sync-requires.js`)

and then add in __mocks__ a file that looks like:

exports.notVisitedPageComponents = []
exports.components = []

I ran that against your reproduction @sklawren and storybook doesn't fail to compile anymore but the browser console is now showing a "exports is not defined" error — which from a bit of googling seems unconnected? Not that familiar with Storybook so not sure.

picture KyleAMathews on 24 Nov 2020
👍4

All 20 comments

Hi @sklawren !

Do you have one of the following environment variables set: GATSBY_EXPERIMENTAL_LAZY_DEVJS or GATSBY_EXPERIMENTAL_FAST_DEV? Given your stack trace, this error can potentially occur only when one of those flags is set.

If you don't have those set - it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

vladar picture vladar on 24 Nov 2020

I only ran npm run storybook after updating Gatsby using npm-check -u. I don't have either of those env vars set unless they are somehow enabled by default in 2.27.1.

I forgot to mention that gatsby itself runs just fine. It's only an issue with running Storybook. I just updated Storybook to 6.1.5 and same issue exists.

I don't know how I can make a minimal reproduction on codesandbox. This error happens run you run Storybook in a default gatsby project with no template. I don't think that can be done on codesandbox. I'll make a new project, replicate it, and zip it up.

sklawren picture sklawren on 24 Nov 2020

storybook-issue.zip

@vladar Here is a minimal reproduction. If you run storybook in this you'll see the error.

sklawren picture sklawren on 24 Nov 2020

I took a look at the repro and it's not ringing any bells on the Storybook side .. but stranger things have happened 🤷‍♂️

shilman picture shilman on 24 Nov 2020

I experience the same issues here ✋ If I introduce stories in my Storybook with React components that include Gatsby (import { Link } from 'gatsby') the error pops up. No ENV variables used. 

"gatsby": "^2.26.1"
"@storybook/react": "^6.1.5",

UPDATE: I fixed my specific issue by updating from node v10.16.1 to v12.18.4.

joakimbording picture joakimbording on 24 Nov 2020

hmm @vladar this is happening probably because webpack is compiling the new virtual file despite it being inside an if statement. Webpack eagerly requires unlike Node.js. The fix would be to always write out the virtual file even if the user hasn't opted into the experiment yet. I'll write a fix.

KyleAMathews picture KyleAMathews on 24 Nov 2020

Looks like we'll need to alias the virtual module in Storybook's config.

In .storybook/main.js you can add:

config.resolve.alias[
  "$virtual/lazy-client-sync-requires"
] = require.resolve(`./__mocks__/virtual-lazy-client-sync-requires.js`)

and then add in __mocks__ a file that looks like:

exports.notVisitedPageComponents = []
exports.components = []

I ran that against your reproduction @sklawren and storybook doesn't fail to compile anymore but the browser console is now showing a "exports is not defined" error — which from a bit of googling seems unconnected? Not that familiar with Storybook so not sure.

KyleAMathews picture KyleAMathews on 24 Nov 2020
👍4

@KyleAMathews I followed your instructions and did not see "exports is not defined" in the console, but did see the following two messages, the first of which was a WARN.

DevTools failed to load SourceMap: Could not load content for http://localhost:6006/unfetch.js.map: 
HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Tried to update globals but the old and new values are equal.

Regardless, Storybook is working now with this edit.

@KyleAMathews @shilman To avoid this workaround in the future, does a change need to be made in Gatsby, Storybook, or both?

sklawren picture sklawren on 25 Nov 2020

I suggest creating an storybook-addon-gatsby, a storybook addon that bundles the config from https://www.gatsbyjs.com/docs/visual-testing-with-storybook/ along with this fix into a preset that configures Storybook with a single line. I'd be happy to work with somebody on the Gatsby team to help make this happen. If Gatsby were to maintain the addon, we could easily make npx sb init detect the gatsby project and install the addon automatically as part of the initialization. We are currently doing this for CRA, and separately NextJS has also released a preset in alpha.

shilman picture shilman on 25 Nov 2020

@shilman I tried googling storybook-addon-gatsby and @storybook/addon-gatsby and came up empty.

sklawren picture sklawren on 25 Nov 2020

@sklawren edited my proposal. We'd need to make it

shilman picture shilman on 25 Nov 2020

Ah! 😅 Now I get it.

sklawren picture sklawren on 25 Nov 2020

@shilman is it possible to create a discussion with what needs to happen (step-by-step plan with documentation, ...), etc to make this a reality? From there on we can collaborate on it.

wardpeet picture wardpeet on 25 Nov 2020

Update: we'll be removing the new virtual module in the next patch release — https://github.com/gatsbyjs/gatsby/pull/28295

💯 to an official storybook preset.

KyleAMathews picture KyleAMathews on 25 Nov 2020

@KyleAMathews @shilman I deleted my node_modules folder and ran npm i again and now I am getting that exports is not defined error in the console and Storybook won't load stories.

story_store.js:69 Uncaught ReferenceError: exports is not defined
    at Module../node_modules/@storybook/client-api/dist/story_store.js (story_store.js:69)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)
    at Object../node_modules/@storybook/client-api/dist/index.js (index.js:127)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)
    at Object../node_modules/@storybook/core/dist/client/preview/index.js (index.js:8)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)
    at Object../node_modules/@storybook/core/dist/client/index.js (index.js:9)

@shilman Any idea what might be causing this? I've got storybook 6.1.6 and gatsby 2.27.2.

sklawren picture sklawren on 26 Nov 2020

I made a new Gatsby project from scratch, upgraded to gatsby 2.27.3, ran npm sb init and set everything up again and it works. No "exports is not defined" error. Weird.

sklawren picture sklawren on 26 Nov 2020
🚀1

Opened a discussion for the storybook addon here https://github.com/gatsbyjs/gatsby/discussions/28304

shilman picture shilman on 26 Nov 2020

Having the same issue with react-styleguidist. When using react-styleguidist with Gatsby 2.27.5 getting Can't resolve '$virtual/lazy-client-sync-requires'

smashercosmo picture smashercosmo on 1 Dec 2020
👍1

We did remove $virtual/lazy-client-sync-requires imports in [email protected], so upgrade to it should help

pieh picture pieh on 10 Dec 2020

So I can remove this code?

https://github.com/gatsbyjs/gatsby/issues/28253#issuecomment-733155120

sklawren picture sklawren on 11 Dec 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

3CordGuy picture 3CordGuy  ·  3Comments
theduke picture theduke  ·  3Comments
timbrandin picture timbrandin  ·  3Comments
mikestopcontinues picture mikestopcontinues  ·  3Comments
Oppenheimer1 picture Oppenheimer1  ·  3Comments