title: Webpack 5 and Storybook 6 integration throws an error in DefinePlugin.js
body: <p>Working on <strong>Webpack 5</strong> and <strong>Storybook</strong> integration in our <strong>React</strong> apps' repository. Mainly upgrading from <strong>Webpack v4</strong> to <strong>v5</strong> because its support has been announced <a href="https://storybook.js.org/blog/storybook-for-webpack-5/" rel="noreferrer">here in this blog post</a> officially. Following the suggested <a href="https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrade" rel="noreferrer">full instructions</a>.</p>
  <p>With the below mentioned setup I get the following error message on the console:</p>
  <pre><code>&lt;i&gt; [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
  </code></pre>
  <p>Basically the error is coming from the marked line in <a href="https://github.com/webpack/webpack/blob/49a11ce49d9518333e5f1194c6c506e909c5bc26/lib/DefinePlugin.js#L565" rel="noreferrer"><code>/node_modules/webpack/lib/DefinePlugin.js</code></a> once running for the first time <code>npm run storybook</code>.</p>
  <h3>Technical details:</h3>
  <p>See <code>package.json</code> related <code>devDependencies</code>:</p>
  <pre class="lang-json prettyprint-override"><code>&quot;@storybook/addon-actions&quot;: &quot;^6.2.3&quot;,
  &quot;@storybook/addon-controls&quot;: &quot;^6.2.3&quot;,
  &quot;@storybook/addon-docs&quot;: &quot;^6.2.3&quot;,
  &quot;@storybook/addon-knobs&quot;: &quot;^6.2.3&quot;,
  &quot;@storybook/addon-links&quot;: &quot;^6.2.3&quot;,
  &quot;@storybook/addon-options&quot;: &quot;^5.3.21&quot;,
  &quot;@storybook/addon-toolbars&quot;: &quot;^6.2.3&quot;,
  &quot;@storybook/addon-viewport&quot;: &quot;^6.2.3&quot;,
  &quot;@storybook/addons&quot;: &quot;^6.2.3&quot;,
  &quot;@storybook/builder-webpack5&quot;: &quot;^6.2.3&quot;,
  &quot;@storybook/react&quot;: &quot;^6.2.3&quot;,
  &quot;@storybook/storybook-deployer&quot;: &quot;^2.8.7&quot;,
  &quot;@storybook/theming&quot;: &quot;^6.2.3&quot;,
  // ...
  &quot;@pmmmwh/react-refresh-webpack-plugin&quot;: &quot;^0.4.3&quot;,
  &quot;html-webpack-harddisk-plugin&quot;: &quot;^2.0.0&quot;,
  &quot;html-webpack-plugin&quot;: &quot;^5.3.1&quot;,
  &quot;optimize-css-assets-webpack-plugin&quot;: &quot;^5.0.4&quot;,
  &quot;terser-webpack-plugin&quot;: &quot;^5.1.1&quot;,
  &quot;uglifyjs-webpack-plugin&quot;: &quot;^2.2.0&quot;,
  // ...
  &quot;webpack&quot;: &quot;^5.31.2&quot;,
  &quot;webpack-cli&quot;: &quot;^3.3.12&quot;,
  &quot;webpack-dev-middleware&quot;: &quot;^4.1.0&quot;,
  &quot;webpack-dev-server&quot;: &quot;^3.11.2&quot;,
  &quot;webpack-filter-warnings-plugin&quot;: &quot;^1.2.1&quot;,
  &quot;webpack-isomorphic-tools&quot;: &quot;^4.0.0&quot;
  // ...
  &quot;crypto-browserify&quot;: &quot;^3.12.0&quot;,
  &quot;stream-browserify&quot;: &quot;^3.0.0&quot;
  </code></pre>
  <p>Also the <code>webpack.config.js</code> content:</p>
  <pre><code>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',
  }
  </code></pre>
  <p>And the <code>main.ts</code> setup for <strong>Storybook</strong>:</p>
  <pre><code>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 =&gt; {
      return {
        ...config,
        resolve: { ...config.resolve },
        module: { ...config.module }
      }
    },
  } as StorybookConfig
  </code></pre>
  <h3>Questions:</h3>
  <p>I have tried to downgrade <strong>webpack</strong> till the version of <a href="https://github.com/webpack/webpack/releases/tag/v5.25.1" rel="noreferrer"><code>&quot;webpack&quot;: &quot;^5.25.1&quot;</code></a> where the issue is not existing but the Storybook pages are not loading anymore. Also I checked <a href="https://stackoverflow.com/questions/61375674/upgrade-to-webpack-5-breaking-storybook-5/66825007#66825007">this answer</a> here which seems unrelated.</p>
  <ul>
  <li>Any idea where should I take a look to progress further?</li>
  <li>Any configuration what's missing maybe regarding this <code>compilation.valueCacheVersions.get(name)</code> line from <strong>webpack</strong>?</li>
  </ul>
  <p>I couldn't find anything related in the documentation. If more information needed, let me know in the comment section, thank you!</p>