CRA/webpack 制作错误：t[s] 不是函数

问题描述 投票：0回答：1

我仅在生产版本中的 React CRA 应用程序中遇到这个奇怪的错误：

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

单击堆栈跟踪的第一行会将我带到 webpack 的 

bootstrap.js
文件：

// 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__;

错误显示

moduleId
在
__webpack_modules__
中不存在。我在这一行设置了断点，但在 
moduleId=579
上出错。我不知道如何找出哪个模块来查看坏包是什么。有更好的方法来调试吗？

这是我的

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"
  }
}

编辑：进一步调试确认此错误来自模块初始化期间的主包。具体来说，在这里：

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
}

此日志显示 

t
包含模块 ID 到模块功能的映射。 
s
是它尝试运行的模块 ID，但它不存在于 
t
中。有没有办法找出这是什么模块？它是 ID 579。

堆栈跟踪的另外两行，

Game.ts:142:3
和
index.tsx:19:25
仅指向文件的最末尾。如果我在这两个文件的末尾添加更多代码，错误就会移至新代码的末尾。

webpack create-react-app
1个回答
0
投票

您遇到的错误 

Uncaught TypeError: t[s] is not a function
表示在模块映射 (
579
) 中找不到具有指定 ID 的模块（在本例中为 
t
）。发生这种情况的原因有多种，例如缺少模块、不正确的构建配置或 Webpack 构建过程的问题。

调试步骤

  1. 检查模块ID：

    • 模块 ID 
      579
      是 Webpack 在构建过程中分配的数字标识符。要找出哪个模块对应于该 ID，您可以查看构建过程生成的 
      main.chunk.js
      或 
      main.js
      文件。在此文件中搜索 
      579
      可查看模块内容。

  2. 构建配置：

    • 确保您的构建配置正确。有时，问题可能是由于 
      webpack.config.js
      或其他构建相关文件中的错误配置引起的。由于您使用的是 Create React App (CRA)，因此配置通常是隐藏的，但如果需要，您可以弹出应用程序以获得更多控制权。

  3. 依赖性问题：

    • 检查您的任何依赖项是否导致问题。您可以尝试更新或降级依赖项以查看问题是否仍然存在。具体来说，检查是否有任何可能引入重大更改的依赖项的最新更新。

  4. 来源地图：

    • 在生产构建中启用源映射以获得更有意义的堆栈跟踪。这可以帮助您确定源代码中错误的确切位置。
    • 在
      package.json
      中，添加以下脚本以使用源映射进行构建： 
      "scripts": {
  "build:dev": "react-scripts build --profile --openssl-legacy-provider"
}
    • 使用源映射运行构建： 
      npm run build:dev

  5. Webpack 捆绑分析器：

    • 使用 Webpack Bundle Analyzer 可视化捆绑包的大小和组成。这可以帮助您识别任何丢失或错误包含的模块。
    • 安装分析仪： 
      npm install --save-dev webpack-bundle-analyzer
    • 修改您的 
      package.json
      以将分析器包含在构建过程中： 
      "scripts": {
  "analyze": "react-scripts build && serve -s build"
}
    • 运行分析器： 
      npm run analyze

  6. 检查循环依赖关系：

    • 循环依赖有时会在构建过程中导致问题。使用 
      madge
      等工具来检测循环依赖： 
      npm install --save-dev madge

      npx madge --circular src

查找模块示例

要找到ID 

579
对应的模块，可以在生成的bundle文件中搜索：

  1. 找到捆绑文件：

    • 运行
      npm run build
      后，在
      main.chunk.js
      目录中找到
      main.js
      或
      build/static/js
      文件。

  2. 搜索模块ID：

    • 在文本编辑器中打开捆绑文件并搜索 
      579
      。您应该找到一段如下所示的代码： 
      /* 579 */
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
    // Module content
}),

  3. 分析模块内容：

    • 查看模块的内容以了解它的作用。这可以为您提供有关它可能丢失或导致问题的原因的线索。

添加源映射示例

要在生产版本中启用源映射，您可以修改您的 

package.json
脚本：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build --profile --openssl-legacy-provider",
  "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\"",
  "build:dev": "react-scripts build --profile --openssl-legacy-provider"
}

使用源映射运行构建：

npm run build:dev

结论

通过执行这些步骤，您应该能够识别导致问题的模块并确定错误的根本原因。如果问题仍然存在，请考虑提供有关模块内容以及项目的任何最新更改的更多详细信息。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.