Webpack 5 and Storybook 6 integration throws an error in DefinePlugin.js

Question

Working on Webpack 5 and Storybook integration in our React apps' repository. Mainly upgrading from Webpack v4 to v5 because its support has been announced here in this blog post officially. Following the suggested full instructions.

With the below mentioned setup I get the following error message on the console:

<i> [webpack-dev-middleware] wait until bundle finished
10% building 0/1 entries 0/0 dependencies 0/0 modulesℹ ｢wdm｣: wait until bundle finished: 
/opt/app/node_modules/webpack/lib/DefinePlugin.js:549
           const oldVersion = compilation.valueCacheVersions.get(name);                                                                                           
                                                             ^
 TypeError: Cannot read property 'get' of undefined
    at /opt/app/node_modules/webpack/lib/DefinePlugin.js:549:57

Basically the error is coming from the marked line in /node_modules/webpack/lib/DefinePlugin.js once running for the first time npm run storybook.

Technical details:

See package.json related devDependencies:

"@storybook/addon-actions": "^6.2.3",
"@storybook/addon-controls": "^6.2.3",
"@storybook/addon-docs": "^6.2.3",
"@storybook/addon-knobs": "^6.2.3",
"@storybook/addon-links": "^6.2.3",
"@storybook/addon-options": "^5.3.21",
"@storybook/addon-toolbars": "^6.2.3",
"@storybook/addon-viewport": "^6.2.3",
"@storybook/addons": "^6.2.3",
"@storybook/builder-webpack5": "^6.2.3",
"@storybook/react": "^6.2.3",
"@storybook/storybook-deployer": "^2.8.7",
"@storybook/theming": "^6.2.3",
// ...
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
"html-webpack-harddisk-plugin": "^2.0.0",
"html-webpack-plugin": "^5.3.1",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"terser-webpack-plugin": "^5.1.1",
"uglifyjs-webpack-plugin": "^2.2.0",
// ...
"webpack": "^5.31.2",
"webpack-cli": "^3.3.12",
"webpack-dev-middleware": "^4.1.0",
"webpack-dev-server": "^3.11.2",
"webpack-filter-warnings-plugin": "^1.2.1",
"webpack-isomorphic-tools": "^4.0.0"
// ...
"crypto-browserify": "^3.12.0",
"stream-browserify": "^3.0.0"

Also the webpack.config.js content:

const webpack = require('webpack')
const path = require('path')

process.env.NODE_ENV = 'development'

module.exports = {
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
    alias: {
      '@src': path.resolve(__dirname, '../src'),
    },
    fallback: {
      stream: require.resolve('stream-browserify'),
      crypto: require.resolve('crypto-browserify'),
    },
  },
  plugins: [
    new webpack.EnvironmentPlugin({
      KEY: 'value'
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
          },
        },
        exclude: [/node_modules/],
      }
    ],
  },
  devtool: 'source-map',
}

And the main.ts setup for Storybook:

import { StorybookConfig } from '@storybook/react/types'

module.exports = {
  core: {
    builder: 'webpack5',
  },
  stories: [
    '../../src/stories/**/*.example.@(ts|tsx)'
  ],
  logLevel: 'debug',
  reactOptions: {
    fastRefresh: true,
  },
  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-controls',
    '@storybook/addon-options',
    '@storybook/addon-toolbars',
    '@storybook/addon-viewport',
  ],
  webpackFinal: config => {
    return {
      ...config,
      resolve: { ...config.resolve },
      module: { ...config.module }
    }
  },
} as StorybookConfig

Questions:

I have tried to downgrade webpack till the version of "webpack": "^5.25.1" where the issue is not existing but the Storybook pages are not loading anymore. Also I checked this answer here which seems unrelated.

• Any idea where should I take a look to progress further?
• Any configuration what's missing maybe regarding this compilation.valueCacheVersions.get(name) line from webpack?

I couldn't find anything related in the documentation. If more information needed, let me know in the comment section, thank you!

Answer 1

Update storybook components to their latest stable version,
no need for alphas (atm stable is 6.2.9)

You could follow the instructions here:

npm i -D @storybook/builder-webpack5@next
npm i -D dotenv-webpack

Then update your .storybook/main.js:

 module.exports = {
   core: {
     builder: "webpack5",
   }
 };

Answer 2

We had the same issue.

First, you will need to install @storybook/builder-webpack5@next.

Then you have to upgrade every @storybook dependency to version ^6.3.0-alpha.6 using this command:

npx sb@next upgrade --prerelease

Upgrade also dotenv-webpack to ^7.0.2.

Another small fix we had to do was to add this line in the storybook webpack.config.js file:

config.resolve.fallback = {
  http: false,
}

Full instructions can be found here

Answer 3

There's chaos with Storybook's own dependency on Webpack v.4 at the moment. Try pinning the version of your storybook packages at 6.2.3 and adding the latest dotenv-webpack as your dev dependency. Obviously, perform the usual dance of deleting the node_modules folder in case there are some conflicting dependencies.

Links to relevant issues:

• description of the problem and recommendation about dotenv-webpack
• an issue that caused Storybook maintainers to revert their fix used in v.6.2.4