gatsby: Gatsby 2.27.1 breaks Storybook

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

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 22 (11 by maintainers)

Most upvoted comments

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 on Nov 24, 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 on Dec 1, 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 on Nov 26, 2020