I'm getting this strange error in a React CRA app in production builds only:
bootstrap:19 Uncaught TypeError: t[s] is not a function
at i (bootstrap:19:22)
at Game.ts:142:3
at index.tsx:19:25
Clicking on the first line of the stack trace takes me to webpack's bootstrap.js
file:
// The module cache
var __webpack_module_cache__ = {};
// The require function
function __webpack_require__(moduleId) {
// Check if module is in cache
var cachedModule = __webpack_module_cache__[moduleId];
if (cachedModule !== undefined) {
return cachedModule.exports;
}
// Create a new module (and put it into the cache)
var module = __webpack_module_cache__[moduleId] = {
// no module.id needed
// no module.loaded needed
exports: {}
};
// ERROR ON THIS LINE
// Execute the module function
__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
// Return the exports of the module
return module.exports;
}
// expose the modules object (__webpack_modules__)
__webpack_require__.m = __webpack_modules__;
The error is showing that moduleId
does not exist in __webpack_modules__
. I set a breakpoint on this line and it's erroring on moduleId=579
. I'm not sure how to figure out what module that is to see what the bad package is. Is there a better way to debug this?
Here is my package.json
:
{
"name": "cosmicwar-client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@bufbuild/protobuf": "^2.0.0",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.106",
"@types/react": "^18.3.4",
"@types/react-dom": "^18.3.0",
"@types/uuid": "^10.0.0",
"excalibur": "^0.29.3",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
"ts-proto": "^2.0.3",
"typescript": "^4.9.5",
"uuid": "^10.0.0",
"web-vitals": "^2.1.4",
"yaml": "^2.5.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"proto": "protoc --experimental_allow_proto3_optional --plugin=./node_modules/.bin/protoc-gen-ts_proto.cmd --ts_proto_out=src/game/proto --proto_path ../proto-schema ../proto-schema/messages.proto",
"configure": "xcopy /sy \"../data\" \"./public/data\""
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"tailwindcss": "^3.4.12"
}
}
Edit: Further debugging confirms that this error is coming from the main bundle during module initialization. Specifically, here:
function i(s) {
var n = e[s];
if (void 0 !== n)
return n.exports;
var r = e[s] = {
exports: {}
};
console.log(t, s); // Added log for debugging
return t[s](r, r.exports, i),
r.exports
}
This log shows that t
contains a map of module IDs to module functions. s
is the module ID it's trying to run but it doesn't exist in t
. Is there a way to find out what module this is? It is ID 579.
The other two lines of the stack trace, Game.ts:142:3
and index.tsx:19:25
is just pointing at the very end of the file. If I add more code to the end of either of these files, the error just moves to the end of the new code.
Edit 2: I've determined that the problem is the excalibur
package. If I remove that import and all code using it, the error is gone.
I found that the "579" is related to react, as it's used in return(0,h.jsx)(...)
[or similar] in the main.[something].js
of the build output.
And after some investigation, I have identified the main cause of the problem: in node_modules/excalibur/build/esm/excalibur.js
there is var __webpack_modules__ =
.
If you replace the 2 instances of __webpack_modules__
in that file with another variable name, then the result of npm run build
can run without the weird error.
Another way to avoid the problem is to go to node_modules/excalibur/package.json
and change "module": "build/esm/excalibur.js"
, to "module": "build/esm/excalibur.min.js"
(the variable name is changed due to minification, so it has no conflict with the __webpack_modules__
from the CRA).
But ultimately, the package authors should update the package. Otherwise, every time you run npm install
you will need to edit the file(s).