React Native + TypeScript路径别名配置失败问题排查

错误根源分析 #

你遇到的Unable to resolve "./src/*/hooks/useAppFonts"错误，核心问题集中在导入路径写法错误、配置细节疏漏或依赖未到位这几个方向。

具体修复步骤 #

• 修正导入路径写法
  代码里不要使用./src/*/hooks/useAppFonts这种带通配符的相对路径，应该用你配置的别名@app来导入，正确写法示例：

  import useAppFonts from '@app/hooks/useAppFonts';
  

  配置中的*是用来匹配路径后续部分的通配符，实际导入代码里不需要添加。

• 清理tsconfig的多余逗号
  你的tsconfig.json中paths最后一项末尾多了个逗号，JSON语法不允许最后一个属性带尾逗号，修正后配置如下：

  {
    "extends": "expo/tsconfig.base",
    "compilerOptions": {
      "strict": true,
      "jsx": "react-native",
      "target": "ESNext",
      "allowSyntheticDefaultImports": true,
      "skipLibCheck": true,
      "baseUrl": ".",
      "paths": {
        "@app/*": ["src/*"],
        "@assets/*": ["assets/*"]
      }
    }
  }
  

• 确认依赖已安装
  确保babel-plugin-module-resolver依赖已安装，未安装的话执行以下命令：

  npm install babel-plugin-module-resolver --save-dev
  # 或使用yarn
  yarn add babel-plugin-module-resolver --dev
  

• 清除缓存并重启服务
  Expo的Metro缓存可能导致新配置不生效，执行命令清除缓存后重启服务：

  npx expo start --clear
  

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