React Native中module-resolver路径解析失败问题求助

环境与问题 #

• 系统：Debian Linux
• 依赖版本：React Native 0.72.6、Expo ~49.0.15
• 文件结构：

app
 - (authenticate)
   - login.tsx
   - register
 - services
   - authentication
     - authentication.context.tsx

在app/(authenticate)/login.tsx中使用import { AuthenticationContext } from "@services/authentication/authentication.context";导入模块时，出现Babel层面的解析错误：

Unable to resolve "@services/authentication/authentication.context" from "app/(authenticate)/login.tsx"

TypeScript配置（tsconfig.json）无错误，问题出在Babel的模块解析配置。

解决方案 #

1. 修正Babel module-resolver的别名配置 #

修改babel.config.js中的alias字段，确保路径以相对根目录的写法（匹配root配置的.）：

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      "expo-router/babel",
      [
        "module-resolver",
        {
          extensions: [
            ".ios.js",
            ".android.js",
            ".ios.jsx",
            ".android.jsx",
            ".js",
            ".jsx",
            ".json",
            ".ts",
            ".tsx",
          ],
          root: ["."],
          alias: {
            "@services": "./app/services",
            "@services/*": "./app/services/*"
          },
        },
      ],
    ],
  };
};

注：原配置中app/services/*缺少开头的./，导致Babel无法正确基于根目录解析路径。

2. 同步tsconfig.json的paths配置（确保一致性） #

尽管你提到tsconfig无错误，仍需确认compilerOptions.paths与Babel别名完全匹配：

{
  "compilerOptions": {
    // 其他配置...
    "paths": {
      "@services/*": ["./app/services/*"]
    }
  }
}

3. 清除Metro缓存并重启服务 #

Expo/Metro会缓存模块解析规则，需强制清除后重启：

1. 停止当前运行的Metro服务
2. 执行命令清除缓存并启动：

npx expo start --clear

4. 检查文件名大小写（Linux环境注意） #

Linux系统对文件名大小写敏感，确保导入路径中的authentication.context与实际文件authentication.context.tsx的大小写完全一致，避免因大小写不匹配导致解析失败。

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