时间戳

首页 > 解决方案 > Webpack 5 和 Storybook 6 集成在 DefinePlugin.js 中引发错误

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

问题描述

在我们的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：

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

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

标签： reactjswebpackstorybook

解决方案

我们有同样的问题。

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

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

npx sb@next upgrade --prerelease

也升级dotenv-webpack到^7.0.2.

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

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

完整的说明可以在这里找到

推荐阅读