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

【问题标题】：Webpack 5 and Storybook 6 integration throws an error in DefinePlugin.jsWebpack 5 和 Storybook 6 集成在 DefinePlugin.js 中引发错误
【发布时间】：2021-07-08 06:24:58
【问题描述】：

在我们的 React 应用程序库中集成 Webpack 5 和 Storybook。主要是从 Webpack v4 升级到 v5 因为它的支持已经正式宣布here in this blog post。按照建议的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" 的版本，该版本不存在问题，但 Storybook 页面不再加载。我还在这里检查了this answer，这似乎无关。

知道我应该在哪里进一步了解吗？
webpack 中的 compilation.valueCacheVersions.get(name) 行可能缺少任何配置？

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

【问题讨论】：

标签： reactjs webpack storybook

【解决方案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

【讨论】：

感谢您的帮助，这似乎工作正常！
谢谢！你为我节省了很多时间。
我必须运行 npm i --save-dev html-webpack-plugin 和 npm i --save-dev dotenv-webpack

【解决方案2】：

将故事书组件更新到最新的稳定版本，
无需 alphas（atm stable 为 6.2.9）

您可以按照here的说明进行操作：

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

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

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

【讨论】：

【解决方案3】：

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