【发布时间】：2022-04-02 01:17:39
【问题描述】：
我正在使用 React.lazy 在运行时加载一些 React 类，这样它们就不会一次全部加载。我的代码适用于生产，但在我处于开发模式时崩溃。 （更新：我的代码不再适用于生产环境 - 见下文）。
特定的错误消息非常神秘，因此很难确切知道问题所在：
Uncaught TypeError: Cannot read property 'call' of undefined at __webpack_require__ (main.js:64)
The above error occurred in one of your React components:
in Unknown
in Suspense
in div (created by Main)
in Main (created by Route)
in Route (created by App)
in Switch (created by App)
in div (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in App
Consider adding an error boundary to your tree to customize error handling behavior.
Uncaught (in promise) TypeError: Cannot read property 'call' of undefined at __webpack_require__ (main.js:64)
第 64 行给出以下代码：
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
我还有其他没有任何问题的 React 类。
我创建的特定类文件称为 Categories.js。据我所知，我加载该类的方式与任何正在运行的类没有任何不同。我什至尝试重命名类/文件，并且我还删除了大部分数据，以防文件中的某些内容导致问题。
以下是我的代码中的相关行：
import React, {Suspense} from 'react';
....
const Categories = React.lazy(()=> import('./Categories'))
....
return (
<Suspense fallback={<div>Loading...</div>}>
<Categories class_select={class_select} />
</Suspense>
)
如果有帮助，这里是我的 webpack.config.js 文件：
const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyPlugin = require('copy-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
module.exports = (env, argv) => {
const isProduction = (argv.mode === "production")
return {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
plugins: [
"@babel/plugin-syntax-dynamic-import"
]
}
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
...(isProduction && {
optimization: {
// minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
extractComments: 'all',
compress: {
drop_console: true
},
}
})
],
}
}),
devtool: !isProduction && 'eval-source-map',
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new CopyPlugin([
{ from: 'src/css', to: 'css' }
])
]
};
};
问题
1) 是什么导致了这个错误？ 2) 为什么它只在开发模式下引起，而不是在生产模式下引起？
更新
我的代码也不再适用于生产环境。我收到以下错误：
Uncaught (in promise) TypeError: Cannot read property 'call' of undefined at o (main.js:2).
事实上，它在生产环境中甚至比开发环境更糟糕。在生产中，没有一个 React 惰性类在工作。在 dev 中，只有其中一个不起作用。
【问题讨论】：
-
我不知道你在解决这个问题上走了多远，我站在我这边试图找到一个解决方案。原因之一似乎与代码的优化有关。如果我理解正确的话，issues of naming between the JS files when the package is built 会导致某些文件丢失对模块的引用，从而导致“未定义”问题。我还在努力，如果我找到解决方案，我会回到你的问题。
标签： javascript reactjs webpack