React JS项目中如何配置Loader处理TypeScript构建的npm模块

问题根源 #

你遇到的Module parse failed: The keyword 'interface' is reserved错误，本质是webpack默认不会编译node_modules目录下的TypeScript源码，而你引入的module-made-in-typescript模块未预编译为JavaScript，导致webpack无法识别TS语法。

解决方案 #

方案1：优先检查模块是否提供预编译产物 #

先查看node_modules/module-made-in-typescript/package.json中的main/module字段，确认是否指向已编译的JS文件（如dist/index.js）：

• 如果存在，检查你的引入路径是否错误（比如直接导入了模块的src目录）
• 如果不存在，说明模块作者未编译就发布，需要自行配置编译

方案2：用react-app-rewired修改webpack配置（无需eject） #

因为你使用react-scripts创建项目，默认不暴露webpack配置，推荐用react-app-rewired实现无eject修改：

1. 安装依赖

npm install react-app-rewired customize-cra --save-dev

2. 项目根目录创建config-overrides.js

const { override, addWebpackModuleRule } = require('customize-cra');

module.exports = override(
  // 为目标TS模块添加编译规则
  addWebpackModuleRule({
    test: /\.(ts|tsx)$/,
    include: /node_modules\/module-made-in-typescript/,
    use: {
      loader: 'ts-loader',
      options: {
        configFile: './tsconfig.json' // 复用现有tsconfig配置
      }
    }
  })
);

3. 修改package.json的启动脚本

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

方案3：优化tsconfig.json配置 #

调整现有tsconfig.json，确保类型检查覆盖目标模块，同时避免冗余编译：

{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext", // 适配React项目的模块系统
    "jsx": "react-jsx", // React 18推荐配置
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "./src/**/*",
    "./node_modules/module-made-in-typescript/src/**/*"
  ],
  "exclude": [
    "node_modules/**/*",
    "!node_modules/module-made-in-typescript/src/**/*"
  ]
}

注意事项 #

• 避免直接执行eject命令，否则后续升级react-scripts会面临复杂的配置维护工作
• 若出现ts-loader与TypeScript版本不兼容问题，可调整ts-loader版本（当前你的ts-loader@9.4.2与typescript@4.9.5是兼容的）
• 测试前建议删除node_modules和锁文件，重新安装依赖以清除缓存

内容的提问来源于stack exchange，提问作者sgb004