未捕获的类型错误：无法读取 __webpack_require__ 处未定义的属性“调用”

Question

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.

Answer 1

Process

In order to find a potential solution to this issue, I had to tinker with the optimization module, which was indeed the issue here, even when not enabled surprisingly. My best guess is that some parameters are set to default in production mode and not in dev mode and this causes the issues of imports and undefined properties.

I decided to try replicating the deployment environment and check if I could at least "break" the development as well and investigate the issue from here. These are the parameters that are different between production and development and that were suspect in causing the issue at hand (you can try yourself by switching to the opposite value to put your deployment like the development environment for example).

On the link I provided in the comment, the user was explaining that the issue was at deployment level and that the way the vendors chunk were built, were colliding with the main chunks and cuts the entry to one another. One of the solution was to use concatenateModules: false apparently, but to no avail, it didn't solve my issue. So I tried with the others and found the issue bellow.

Potential solution

in module.exports , the optimization object should be edited

optimization: {
    minimize: true,
    namedModules: true,
    namedChunks: true,
    removeAvailableModules: true,
    flagIncludedChunks: true,
    occurrenceOrder: false,
    usedExports: true,
    concatenateModules: true,
    sideEffects: false, // <----- in prod defaults to true if left blank
}

Edit: all of these parameters are set to their opposite between production and development, tweak them at your own leisure, some issues stems from them

Explanation

After switching all the parameters I found that the sideEffects one is the one that breaks things and I see why:

The sideEffects flag will break down imports into separate ones as follow, as per the documentation on sideEffects :

import { a, b } from "big-module-with-flag"

is rewritten to

import { a } from "big-module-with-flag/a";
import { b } from "big-module-with-flag/b";

And will try to optimize imports accordingly across the modules, which can cause issues in production. Normally this should help optimizing the size of the package by reducing the bundles, at the cost of removing some imports but can break things at import.

I hope the explanation was somewhat clear, if somebody has deeper knowledge on WebPack optimization, any documentation and enhancement would be welcome.

Answer 2

I also had the same error, extremely difficult to diagnose the root cause from a minified JavaScript stack trace. In the end, I just upgraded the Webpack version to the latest 4.X stable release (I was using Angular 11, so no Webpack 5 support) and the problem magically went away. Assume there must have been some dependency tree bug in the Webpack 4.2.X version that I was using previously.

Webpack versions reference: https://www.npmjs.com/package/webpack

Commands

npm uninstall webpack
npm install --save-dev webpack@4.46.0

Answer 3

I had a similar error that would only occur on production. Production had Cloudflare but Test did not. It turned out our Cloudflare cache settings were ignoring our cache busting. Cache busting via query parameters /scripts/main.js?v=1080237476 . So our code-split Webpack output had mis-matched JavaScript files and threw the error Uncaught TypeError: Cannot read property 'call' of undefined . The quick fix was to purge our Cloudflare cache after deploy. Long term fix is to configure our Cloudflare settings or use hashed filenames instead of query parameters for cache busting.

Answer 4

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.