webpackcreate-react-app

CRA/webpack production error: t[s] is not a function


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.


Solution

  • 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).