Webpack 5 和 Storybook 6 集成在 DefinePlugin.js 中引发错误

Question

正在 Webpack 5 和 Storybook 集成到我们的 React 应用程序库中。主要是从 Webpack v4 升级到 v5 因为它的支持已经宣布 here in this blog post officially. Following the suggested full instructions.

使用下面提到的设置，我在控制台上收到以下错误消息：

<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

基本上错误来自 /node_modules/webpack/lib/DefinePlugin.js 中标记的行一次运行第一次 npm run storybook.

技术细节：

参见 package.json 相关 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"

还有webpack.config.js内容：

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',
}

以及 Storybook 的 main.ts 设置：

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

问题：

我试图将 webpack 降级到 "webpack": "^5.25.1" where the issue is not existing but the Storybook pages are not loading anymore. Also I checked this answer 的版本，这似乎无关。

知道我应该去哪里看看以进一步取得进展吗？
关于 webpack 中的 compilation.valueCacheVersions.get(name) 行可能缺少的任何配置？

我在文档中找不到任何相关内容。如果需要更多信息，请在评论部分告诉我，谢谢！

Answer 1

我们遇到了同样的问题。

首先，您需要安装 @storybook/builder-webpack5@next。

然后您必须使用此命令将每个@storybook 依赖项升级到版本^6.3.0-alpha.6：

npx sb@next upgrade --prerelease

同时升级 dotenv-webpack 至 ^7.0.2。

我们必须做的另一个小修复是在故事书 webpack.config.js 文件中添加这一行：

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

可以找到完整的说明here

Answer 2

Storybook 自身对 Webpack v.4 的依赖目前存在混乱。尝试将故事书包的版本固定在 6.2.3 并添加最新的 dotenv-webpack 作为你的开发依赖。显然，执行删除 node_modules 文件夹的常规步骤，以防存在一些冲突的依赖项。

Webpack 5 和 Storybook 6 集成在 DefinePlugin.js 中引发错误

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

reactjs

webpack

storybook

技术细节：

问题：