React Native文件存在仍报Unable to resolve module错误如何解决

问题场景 #

使用React Native 0.67.3版本开发移动端应用，项目此前可正常运行，突发模块无法解析报错，报错指向导入../../globals/styles/appColor路径失败。

完整报错信息 #

error: Error: Unable to resolve module ../../globals/styles/appColor from .../src/containers/LoginScreen/style.ts: 

None of these files exist:
  * src/globals/styles/appColor(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
  * src/globals/styles/appColor/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
  1 | import { StyleSheet } from "react-native";
> 2 | import AppColor from "../../globals/styles/appColor";

相关文件参考 #

• LoginScreen目录下style.ts文件：
• globals/styles目录下appColor.ts文件：
• 报错效果截图：

排查解决步骤 #

按优先级从高到低依次验证：

• 校验路径与文件名正确性
  从src/containers/LoginScreen/style.ts的位置出发，手动核对相对路径：回退两层目录到src根目录后，确认globals/styles路径下确实存在appColor.ts文件。重点检查文件名大小写（Metro打包器对大小写敏感，哪怕是AppColor.ts/appcolor.ts这类大小写差异都会直接识别失败），同时确认没有同名的appColor文件夹和ts文件并存导致解析冲突。
• 清理Metro缓存重启服务
  缓存异常是RN突发模块解析错误的最常见原因，先终止当前运行的Metro服务，执行以下命令清理缓存后重启：

  npx react-native start --reset-cache
  # 使用yarn的话可执行
  yarn start --reset-cache
  

• 全量清理构建缓存与依赖
  如果清Metro缓存无效，执行全量清理，排除构建缓存/依赖损坏问题：

  # 删除依赖与各端构建缓存
  rm -rf node_modules ios/build android/build android/app/build
  # 重新安装依赖
  npm install
  # yarn用户替换为yarn install
  # 清缓存重启服务
  npx react-native start --reset-cache
  

• 核对导入导出逻辑
  打开appColor.ts确认导出方式：如果是export default AppColor的默认导出，现有导入语句写法没问题；如果是命名导出export const AppColor = {}，需要把导入语句改成import { AppColor } from "../../globals/styles/appColor"。如果最近误改了导出语句，改回即可恢复。
• 检查配置文件
  确认最近没有改动tsconfig.json、babel.config.js里的模块解析、路径别名相关配置，RN 0.67.3默认支持相对路径导入，错误的别名配置会导致相对路径解析失效，有改动的话回滚后重试。

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