大佬教程收集整理的这篇文章主要介绍了Webpack 5 和 Storybook 6 集成在 DefinePlugin.js 中引发错误 技术细节：问题：，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
致力于将 Webpack 5 和 Storybook 集成到我们的 React 应用程序存储库中。主要是从 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 的 @H_367_17@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 此处似乎无关。
我在文档中找不到任何相关内容。如果需要更多信息，请在评论部分告诉我，谢谢！
我们遇到了同样的问题。
首先，您需要安装 @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
,将故事书组件更新到最新的稳定版本，
不需要alpha（atm stable 是6.2.9）
您可以按照说明here：
func collectionView(_ collectionView: UICollectionView,didSELEctItemAt indexPath: IndexPath) {
tru.append(indexPath.item)
imagesForSELEct = []
label2.isHidden = true
photoCollection.isHidden = true
photoCollection.reloadData()
scanPhotos()
}
然后更新您的 .storybook/main.js：
npm i -D @storybook/builder-webpack5@next
npm i -D dotenv-webpack
目前 Storybook 自身对 Webpack v.4 的依赖存在混乱。尝试将您的故事书包版本固定在 6.2.3 并添加最新的 dotenv-webpack 作为您的开发依赖项。显然，如果存在一些冲突的依赖项，请执行删除 node_modules 文件夹的常规操作。
相关问题的链接：
以上是大佬教程为你收集整理的Webpack 5 和 Storybook 6 集成在 DefinePlugin.js 中引发错误 技术细节：问题：全部内容，希望文章能够帮你解决Webpack 5 和 Storybook 6 集成在 DefinePlugin.js 中引发错误 技术细节：问题：所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。