React Native中使用TS绝对路径导入语句触发报错如何解决

问题背景 #

在React Native项目中将相对路径导入改造为绝对路径别名导入时触发模块找不到报错，当前已完成的配置如下：
tsconfig.json配置：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@buttons/*": ["src/components/buttons/*"]
    },
    "jsx": "react",
    "resolveJsonModule": true
  }
}

业务代码导入语句：

import {CoreButton} from '@buttons/CoreButton';

排查与修复步骤 #

• 优先检查Metro打包器别名配置：tsconfig.json中的paths配置仅用于TypeScript类型解析，React Native默认使用的Metro打包器不会读取该配置，这是该类报错的最常见诱因，按以下步骤补充配置：
  1. 安装babel模块解析插件：执行npm install -D babel-plugin-module-resolver或yarn add -D babel-plugin-module-resolver
  2. 修改项目根目录下的babel.config.js，补充别名配置，和tsconfig中的映射规则保持完全一致：

  module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
      [
        'module-resolver',
        {
          root: ['./'],
          alias: {
            '@buttons': './src/components/buttons',
          },
        },
      ],
    ],
  };
  

  3. 清空Metro缓存重启服务：执行npm start -- --reset-cache或yarn start --reset-cache。

  注意：Metro缓存优先级很高，不清缓存即使配置正确也可能持续报错，不要直接复用之前启动的Metro服务。

• 校验tsconfig生效范围：确认业务代码文件在tsconfig的覆盖范围内，如果手动配置过include字段，需要确保src目录被包含，可补充如下配置：

  {
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
  }
  

• 校验文件路径与导出正确性：
  1. 确认src/components/buttons/目录下确实存在CoreButton对应文件，后缀为.tsx/.ts/.jsx/.js
  2. 确认该文件存在CoreButton的命名导出，不存在拼写错误
  3. 检查文件名大小写是否完全匹配，Android真机/打包环境对文件名大小写敏感，本地macOS开发时大小写错误不会触发报错，上线/真机运行才会暴露问题。
• 若项目开启了ESLint导入规则校验，需要额外安装eslint-import-resolver-typescript依赖，在ESLint配置中补充别名解析规则，否则ESLint会持续提示导入路径错误。

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