Storybook doesn't work with gatsby

Describe the bug When I want to run Storybook with Gatsby following by these instructions: https://www.gatsbyjs.com/docs/how-to/testing/visual-testing-with-storybook/#setting-up-your-environment, the Storybook is running but I see only a loader and I get this error in dev tools: error:

When I comment this line

config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]

Storybook runs, but I can’t use Gatsby components. The problem exist even with default stories that came from Storybook init.

To Reproduce This is the link to repo where problem exists: https://github.com/moose96/gatsby-storybook-test.

System Environment Info:

System: OS: Windows 10 10.0.19041 CPU: (8) ia32 Intel® Core™ i5-1035G1 CPU @ 1.00GHz Binaries: Node: 14.17.0 - C:\Program Files (x86)\nodejs\node.EXE Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD npm: 6.14.13 - C:\Program Files (x86)\nodejs\npm.CMD Browsers: Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.64) npmPackages: @storybook/addon-actions: ^6.3.4 => 6.3.4 @storybook/addon-essentials: ^6.3.4 => 6.3.4 @storybook/addon-links: ^6.3.4 => 6.3.4 @storybook/builder-webpack5: ^6.3.4 => 6.3.4 @storybook/manager-webpack5: ^6.3.4 => 6.3.4 @storybook/react: ^6.3.4 => 6.3.4.

Additional Context

• Gatsby version: 3.9.0
• React version: 17.0.1
• Storybook version: 6.3.4

[usrrname]

I got Storybook 6.3.7 to work with Gatsby 3 last weekend. What I did was to follow the Gatsby install instructions and introduced the following config.resolve.alias block into my main.ts :

module.exports = {
  stories: ['../src/**/*.stories.@(jsx|tsx|mdx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-docs',
    '@storybook/addon-essentials',
  ],
  typescript: {
    check: true,
  },
  core: {
    builder: 'webpack5',
  },
  webpackFinal: async (config: any) => {
    // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
    config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/];
    // Use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
    config.module.rules[0].use[0].options.plugins.push(
      require.resolve('babel-plugin-remove-graphql-queries')
    );
    config.resolve.alias = {
      ...config.resolve.alias,
      path: require.resolve('path-browserify'),
      crypto: require.resolve('crypto-browserify'),
      stream: require.resolve('stream-browserify'),
    };
    return config;
  },
};

[shilman]

closing as dupe to #15820