Uncaught Typeerror: Cannot Read Property 'call' Of Undefined At __webpack_require__

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. (UPDAT

Solution 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, //<-----inproddefaultstotrueifleftblank
}

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.