React导入报错求助：ESLint提示模块路径解析失败与扩展名缺失

看起来你遇到的这两个ESLint报错其实都和配置细节有关——尤其是你把React放在了devDependencies里，再加上ESLint的import插件默认规则的限制，才会出现这些“不该有”的问题。下面是一步步的解决方法：

1. 先安装必要的解析依赖 #

ESLint的import/no-unresolved报错通常是因为缺少node模块的解析器，先安装eslint-import-resolver-node：

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

如果还没装eslint-plugin-import（毕竟你遇到了这类报错，大概率已经装了，但还是确认下），也补上：

npm install eslint-plugin-import --save-dev

2. 修改ESLint配置文件 #

找到你的ESLint配置文件（比如.eslintrc.js、.eslintrc.json），添加或修改以下配置：

解决路径解析问题 #

在settings里配置node解析器，指定支持的文件扩展名，让ESLint能正确找到React模块：

module.exports = {
  // 其他已有的配置...
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx'] // 根据你的项目文件类型调整
      }
    }
  },
  // ...
}

解决扩展名缺失报错 #

在rules里调整import/extensions规则，忽略对npm包的扩展名检查，同时适配你的项目文件：

rules: {
  // ...其他规则
  'import/extensions': [
    'error',
    'ignorePackages', // 关键：忽略对npm包的扩展名要求
    {
      js: 'never', // .js文件导入不需要加扩展名
      jsx: 'never' // .jsx文件同理，根据你的项目调整
    }
  ],
}

允许从devDependencies导入模块 #

因为你把React放在了devDependencies里，默认ESLint的import/no-extraneous-dependencies规则会禁止在生产代码里导入dev依赖，所以需要调整这个规则：

rules: {
  // ...其他规则
  'import/no-extraneous-dependencies': [
    'error',
    {
      devDependencies: true, // 允许导入devDependencies里的模块
      // 如果只想针对特定文件（比如Storybook的stories文件），可以更精确：
      // devDependencies: ['**/*.stories.js', '**/*.stories.jsx']
    }
  ]
}

3. 验证配置 #

保存配置后，重启ESLint服务（或者重新运行lint命令），这两个报错应该就消失了。

简单说下原因：

• 第一个路径解析错误是因为ESLint默认可能没正确配置node模块的解析器，加上React在devDeps里，导致它没识别到；
• 第二个扩展名错误是因为import/extensions规则默认要求所有导入都加扩展名，但npm包本身不需要扩展名，所以需要添加ignorePackages例外。

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