I am using React.lazy to load some React classes on runtime so that they are not all loaded at once. My code works for production, but crashes when I am in development mode. (UPDATE: My code no longer works in production - see below).
The particular error message is very cryptic so hard to know exactly what the issue is:
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)
Line 64 gives the following code:
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
I have other React classes that are not having any issues.
The particular class file that I created is called Categories.js. As far as I know I am not loading the class any differently than any of the ones that are working. I have even tried renaming the class/file and have I have also removed most of my data out of it in case something in the file was causing the issue.
Here are the pertinent lines from my code:
import React, {Suspense} from 'react';
....
const Categories = React.lazy(()=> import('./Categories'))
....
return (
<Suspense fallback={<div>Loading...</div>}>
<Categories class_select={class_select} />
</Suspense>
)
If it helps here is my webpack.config.js file:
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' }
])
]
};
};
Questions
1) What is causing this error? 2) Why is it only being caused in dev mode but not production mode?
Update
My code no longer works in production either. I am getting the following error:
Uncaught (in promise) TypeError: Cannot read property 'call' of undefined at o (main.js:2).
In fact it is even worse in production than dev. In production none of the React lazy classes are working. In dev it is only one of them that isn't working.