React Native TypeScript配置路径别名报Cannot find module错误怎么解决？

DevOps 小满

2026-9-27

问题根因及修复方案

1. 修复tsconfig.json配置

你当前的include字段仅包含了src目录下的文件，但入口App.tsx位于项目根目录，TS不会对src外的文件做路径别名解析，这是触发TS(2307)报错的核心原因。修改tsconfig.json的include字段：

{
  "extends": "expo/tsconfig.base",
  // 调整include覆盖所有项目文件，或显式添加根目录文件
  "include": ["./**/*"],
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react-native",
    "lib": ["es2017"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext",
    "baseUrl": ".",
    "paths": {
      "@util/*": ["./src/util/*"],
      "@components/*": ["./src/components/*"]
    }
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

同时移除paths配置最后一项的尾逗号，避免低版本TS解析异常。

2. 安装缺失的eslint依赖

你在eslint中配置了TS和Babel路径解析规则，但未安装对应的解析器依赖，执行命令安装：

yarn add -D eslint-import-resolver-typescript eslint-import-resolver-babel-module

3. 启用eslint的babel-module解析器

修改.eslintrc.js的settings字段，取消babel-module的注释：

settings: {
  'import/resolver': {
    node: {
      path: ['src'],
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    },
    typescript: {
      alwaysTryTypes: true,
    },
    'babel-module': {}, // 移除注释启用
  },
}