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!

score 17 · Accepted Answer · edited May 28 '21 at 08:12

17

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

edited May 28 '21 at 08:12

NWRichmond

311
3
6

answered Apr 13 '21 at 12:32

pietrovismara

6,102
5
33
45

Thanks for your help, this seems to be working fine! – norbitrial Apr 13 '21 at 13:49
1

Thank You! You've saved me a lot of time. – karolf May 04 '21 at 21:32
1

I had to run `npm i --save-dev html-webpack-plugin` and `npm i --save-dev dotenv-webpack` – Omar Jun 30 '21 at 00:40
Could you explain the commands for yarn users too? – Arshaan Jul 24 '23 at 04:26

Gal Margalit · Answer 2 · 2021-04-27T11:08:54.373

9

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",
   }
 };

edited Apr 27 '21 at 11:08

answered Apr 25 '21 at 10:36

Gal Margalit

5,525
6
52
56

score 2 · Answer 3 · answered Apr 13 '21 at 12:42

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:

Thanks for your help! The links are pretty useful, I got the explanation why `dotenv-webpack` is required to install here from there. — norbitrial, Apr 13 '21 at 13:50

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

Technical details:

Questions:

3 Answers3

Linked