渐进式迁移React应用至TypeScript时非TS文件导入失败求助

嘿，我之前在渐进式把React项目从JS迁到TS的过程中，也碰到过一模一样的模块找不到的报错，咱们一步步来排查解决：

1. 检查Webpack的扩展名解析配置 #

Webpack默认不会自动识别.ts/.tsx后缀，当你的JS文件（比如ModelClassAFactory.js）导入TS文件（ModelClassA.ts）时，如果没在导入路径里写全后缀，Webpack就找不到对应的文件。

你需要在webpack.js的resolve.extensions数组里加上.ts和.tsx，建议把它们放在前面，避免优先匹配同名JS文件：

module.exports = {
  // ...其他配置项
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  }
};

2. 确认tsconfig.json的模块解析规则 #

确保你的tsconfig.json里的moduleResolution设置为node，这能让TS编译器和Webpack的模块解析逻辑保持一致，避免解析冲突：

{
  "compilerOptions": {
    "moduleResolution": "node",
    "allowJs": true, // 渐进式迁移必须开启，允许TS处理JS文件
    // ...其他编译配置
  }
}

3. 排查路径大小写与拼写问题 #

有时候看起来路径没问题，但实际存在大小写不一致的情况（比如ModelClassA.ts写成了modelclassa.ts）——Windows系统对文件名大小写不敏感，但Webpack在Linux/macOS环境下会严格区分，这也会触发模块找不到的错误。

你可以先在ModelClassAFactory.js里把导入路径写全后缀测试：

import ModelClassA from './ModelClassA.ts';

如果这样能正常运行，就说明是扩展名解析的问题，回到第一步调整Webpack配置即可。

4. 检查Webpack的TS文件编译配置 #

确保你已经在Webpack里配置了ts-loader或者babel-loader来处理TS文件，不然Webpack不知道如何编译.ts文件：

module.exports = {
  // ...其他配置项
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  }
};

如果用Babel处理TS，要记得安装@babel/preset-typescript并在Babel配置中启用它。

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