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

Question

在我们的React应用程序存储库中处理Webpack 5和Storybook集成。主要是从Webpack v4升级到v5，因为它的支持已经在这篇博文中正式宣布。按照建议的完整说明进行操作。

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

<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：

<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

还有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"问题不存在但 Storybook 页面不再加载的版本。我也在这里检查了这个似乎无关的答案。

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

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

Answer 1

我们有同样的问题。

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

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

npx sb@next upgrade --prerelease

也升级dotenv-webpack到^7.0.2.

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

npx sb@next upgrade --prerelease

完整说明可以在这里找到

Answer 2

将 storybook 组件更新到最新的稳定版本，
不需要 alphas（atm stable 是 6.2.9）

您可以按照此处的说明操作：

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

然后更新你的 .storybook/main.js：

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