React-Native导入模块解析错误求助：ESLint报';'缺失

问题重现 #

所有来自react-native的导入均触发以下ESLint错误：

module
"C:/Users/Brendan/projects/garden-manager-native/node_modules/@types/react-native/index"
Parse errors in imported module 'react-native': ';' expected.
(14:32)eslintimport/namespace.

已尝试重装node_modules无效，希望在不禁用ESLint规则的前提下解决问题。

解决方案 #

1. 修正ESLint解析器配置 #

确保ESLint使用TypeScript专用解析器，并正确配置解析选项：
在项目根目录的.eslintrc.js中添加/修改以下配置：

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: './tsconfig.json',
    tsconfigRootDir: __dirname,
  },
  // 保留原有其他配置...
};

同时检查tsconfig.json的compilerOptions，确保target设为ES6或更高版本，module设为ESNext以匹配React Native的模块系统。

2. 同步依赖版本 #

依赖版本不一致是跨环境问题的常见原因：

• 复制朋友的package-lock.json或yarn.lock到本地
• 执行以下命令重装依赖：

  rm -rf node_modules package-lock.json
  npm ci
  

npm ci会严格按照lock文件安装精确版本，避免版本差异。

3. 配置ESLint导入解析器 #

安装并启用TypeScript导入解析器，让ESLint正确识别React Native类型文件：

• 安装依赖：

  npm install eslint-import-resolver-typescript --save-dev
  

• 在.eslintrc.js的settings中添加：

  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        moduleDirectory: ['node_modules', 'src/'],
      },
      typescript: {},
    },
  },
  

4. 清除ESLint缓存 #

ESLint缓存可能导致旧解析结果残留，执行命令清除：

npx eslint --clear-cache

5. 确认类型依赖匹配 #

检查@types/react-native版本与react-native版本是否兼容：
当前项目react-native@0.64.3对应@types/react-native@~0.64.12是匹配的，若问题仍存在，可尝试锁定朋友使用的精确版本号，重新安装类型依赖。

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