Storybook not working with Gatsby v3

Describe the bug Storybook is not working with the latest version of Gatsby v3. It seems that the issue is that Gatsby needs only Webpack 5 to be installed and Storybook 6.2 (the one that has Webpack 5) still requires Webpack 4 to be installed. But I could be wrong here. Any advice will be greatly appreciated. We really don’t want to remove Storybook from our CI/CD pipeline.

To Reproduce

1. gatsby new storybook-test https://github.com/gatsbyjs/gatsby-starter-default
2. cd storybook-test
3. npx sbnext init --builder webpack5
4. npm run storybook

Expected behavior I expect Storybook to build and start serving the preview on localhost port 6006 as usual.

Code snippets This is where it gets stuck.

29% building 2/13 entries 2896/2896 dependencies 506/761 modules(node:72392) UnhandledPromiseRejectionWarning: TypeError: compilation.getAssetPath is not a function
    at /Users/max/WebstormProjects/storybook-test/node_modules/html-webpack-plugin/index.js:169:25
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/max/WebstormProjects/storybook-test/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/max/WebstormProjects/storybook-test/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.emitAssets (/Users/max/WebstormProjects/storybook-test/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:491:19)
    at onCompiled (/Users/max/WebstormProjects/storybook-test/node_modules/@storybook/core-server/node_modules/webpack/lib/Watching.js:51:19)
    at /Users/max/WebstormProjects/storybook-test/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/max/WebstormProjects/storybook-test/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/max/WebstormProjects/storybook-test/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/max/WebstormProjects/storybook-test/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/max/WebstormProjects/storybook-test/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/max/WebstormProjects/storybook-test/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/max/WebstormProjects/storybook-test/node_modules/@storybook/core-server/node_modules/webpack/lib/Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/max/WebstormProjects/storybook-test/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/max/WebstormProjects/storybook-test/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/max/WebstormProjects/storybook-test/node_modules/@storybook/core-server/node_modules/webpack/lib/Compilation.js:1414:32
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/max/WebstormProjects/storybook-test/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
(node:72392) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 4)
99% done plugins webpack-hot-middlewarewebpack built preview 0c93ce49d51e49e63820 in 2956ms

Just clarifying that the build process stops here. It does not start serving on port 6006.

System

 System:
    OS: macOS 11.2.2
    CPU: (4) x64 Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz
  Binaries:
    Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 7.6.3 - ~/.nvm/versions/node/v12.13.0/bin/npm
  Browsers:
    Chrome: 89.0.4389.90
    Safari: 14.0.3
  npmPackages:
    @storybook/addon-actions: ^6.2.0-rc.3 => 6.2.0-rc.4 
    @storybook/addon-essentials: ^6.2.0-rc.3 => 6.2.0-rc.4 
    @storybook/addon-links: ^6.2.0-rc.3 => 6.2.0-rc.4 
    @storybook/builder-webpack5: ^6.2.0-rc.3 => 6.2.0-rc.4 
    @storybook/react: ^6.2.0-rc.3 => 6.2.0-rc.4

┆Issue is synchronized with this Asana task by Unito

[pmccreadycs]

Hope this helps others. I managed to solve my issue with Gatsby 3 and Storybook 6.2.5 (with Webpack5) using SASS and CSS modules. I initially followed https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324

I had to change my main.js file to include the following webpack config:

module.exports = {
  stories: ["../src/**/*.stories.{js,jsx}"],
  addons: [
    "@storybook/addon-docs",
    "@storybook/addon-actions",
    "@storybook/addon-controls",
    "@storybook/addon-a11y",
    "@storybook/addon-viewport",
  ],
  // https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324
  core: {
    builder: "webpack5",
  },
  webpackFinal: async (config) => {
    // https://www.gatsbyjs.com/docs/how-to/testing/visual-testing-with-storybook/
    config.module.rules.push({
      test: /\.(js)$/,
      use: [
        {
          loader: require.resolve("babel-loader"),
          options: {
            presets: [
              // use @babel/preset-react for JSX and env (instead of staged presets)
              require.resolve("@babel/preset-react"),
              require.resolve("@babel/preset-env"),
            ],
            plugins: [
              // use @babel/plugin-proposal-class-properties for class arrow functions
              require.resolve("@babel/plugin-proposal-class-properties"),
              // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
              require.resolve("babel-plugin-remove-graphql-queries"),
              // use babel-plugin-react-docgen to ensure PropTables still appear
              require.resolve("babel-plugin-react-docgen"),
            ],
          },
        },
      ],
      exclude: [/node_modules\/(?!(gatsby)\/)/],
    })

    config.module.rules.push({
      test: /\.s[ac]ss$/i,
      oneOf: [
        // module.scss files (e.g component styles.module.scss)
        // https://webpack.js.org/loaders/style-loader/#modules
        {
          test: /\.module\.s?css$/,
          use: [
            // Add exports of a module as style to DOM
            {
              loader: "style-loader",
              options: {
                esModule: true,
                modules: {
                  namedExport: true,
                },
              },
            },
            // Loads CSS file with resolved imports and returns CSS code
            {
              loader: "css-loader",
              options: {
                esModule: true,
                modules: {
                  namedExport: true,
                },
              },
            },
            // Loads and compiles a SASS/SCSS file
            "sass-loader"
          ],
        },
        // scss files that are not modules (e.g. custom.scss)
        {
          use: [
            // Add exports of a module as style to DOM
            "style-loader",
            // Loads CSS file with resolved imports and returns CSS code
            "css-loader",
            // Loads and compiles a SASS/SCSS file
            "sass-loader"
          ],
        }
      ]
    })

    return config
  }
}

[chris-erickson]

I got the whole thing “working” with webpack 5 but none of my Gatsby styles or CSS class names (using SASS and CSS Modules) are present in the output. Any idea what part of the chain I’m missing?