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

问题描述

致力于将 Webpack 5 和 Storybook 集成到我们的 React 应用程序存储库中.主要是从 Webpack v4 升级到 v5，因为已经宣布支持 在这篇博文中正式发布.遵循建议的完整说明.

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

基本上错误来自中的标记行>/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" 问题不存在但故事书页面不再加载.我还检查了 这个答案 这里似乎无关.

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.

• 知道我应该去哪里进一步取得进展吗?
• webpack 中的 compilation.valueCacheVersions.get(name) 行是否缺少任何配置?

• 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!

推荐答案

我们遇到了同样的问题.

We had the same issue.

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

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

Then you have to upgrade every @storybook dependency to version ^6.3.0-alpha.6 using this command:

npx sb@next upgrade --prerelease

同时将 dotenv-webpack 升级到 ^7.0.2.

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

Another small fix we had to do was to add this line in the storybook webpack.config.js file:

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

可以在此处

这篇关于Webpack 5 和 Storybook 6 集成在 DefinePlugin.js 中引发错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！