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

[KyleAMathews]

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.

[smashercosmo]

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'