存在tsconfig.json时.babelrc是否失效？JS导入TS模块路径异常排查

核心原因 #

1. Metro模块解析逻辑差异：React Native的打包工具Metro在处理JS文件的导入时，默认不会自动识别目录下的.ts后缀入口文件；但处理TS文件导入时，TypeScript的编译逻辑会先解析.ts文件，再转交给Metro，所以反向导入（TS→JS）正常。
2. Babel别名配置缺失关键项：原配置未指定extensions字段，导致babel-plugin-module-resolver无法处理TS后缀的文件匹配；同时别名目标路径未加相对前缀，可能导致解析失效。
3. TSConfig路径仅作用于编译阶段：tsconfig的paths只影响TypeScript的类型检查和编译，不直接作用于Metro的打包解析，所以单独配置它无法解决JS文件的导入问题。

分步解决方案 #

1. 配置Metro支持TS目录入口 #

在项目根目录创建/修改metro.config.js，让Metro解析目录时优先查找TS后缀的index文件：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  resolver: {
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
    resolveRequest: (context, moduleName, platform) => {
      // 针对目标路径自动补全index.ts
      if (moduleName === 'app/lib/api') {
        return context.resolveRequest(context, 'app/lib/api/index.ts', platform);
      }
      return context.resolveRequest(context, moduleName, platform);
    },
  },
});

2. 修复Babel别名配置 #

更新.babelrc，添加extensions字段并修正别名路径：

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    ["module-resolver", {
      "root": ["."],
      "extensions": [".ts", ".tsx", ".js", ".jsx", ".json"],
      "alias": {
        "app/lib/api": "./app/lib/api/index.ts"
      }
    }]
  ]
}

3. 同步TSConfig配置（保证编译与打包一致） #

修改tsconfig.json，确保路径映射和TS编译选项正确：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "app/lib/api": ["app/lib/api/index.ts"]
    },
    "allowJs": true,
    "esModuleInterop": true
  },
  "include": ["app/**/*", "config/**/*"]
}

4. 重置缓存（必做步骤） #

执行以下命令清空所有缓存，确保新配置生效：

watchman watch-del-all
rm -rf node_modules && yarn install
yarn start --reset-cache
rm -rf /tmp/metro-*

为什么反向导入正常？ #

当TS文件导入JS模块时，TypeScript编译器会先通过allowJs选项识别JS文件，完成路径解析后再将编译结果交给Metro处理；而JS文件的导入直接由Metro处理，Metro默认的解析规则不包含自动查找.ts后缀的目录入口，因此必须显式指定文件名或通过配置扩展Metro的解析逻辑。

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