ESLint配置webpack为import/resolver时无法识别部分模块

算力阿峰

2026-9-1

问题根因

报错核心原因有两点：

触发报错的react-hook-form、@headlessui/react均为纯ESM包，入口通过package.json的exports字段声明，你当前使用的eslint-import-resolver-webpack版本或配置默认不支持该字段解析
ESLint配置中未显式指定resolver对应的webpack配置路径，resolver没有读取到你定义的resolve规则，仅靠默认查找逻辑无法匹配部分包的入口

可正常解析的react、react-dom等依赖为CommonJS/ESM双格式包，兼容旧的main/module字段解析逻辑，因此不会触发报错。你之前调整webpack的resolve.modules、mainFields配置无效，是因为问题根源不在webpack侧，而在ESLint的resolver配置。

修复方案

先升级相关依赖到最新版本，保证基础解析能力兼容ESM包规则：

npm install --save-dev eslint-plugin-import@latest eslint-import-resolver-webpack@latest

修改ESLint配置文件（.eslintrc.js/.eslintrc.json等），显式配置import解析规则：

// .eslintrc.js 配置片段
module.exports = {
  // 其余原有ESLint配置保持不变
  settings: {
    'import/resolver': {
      webpack: {
        // 显式指定项目webpack配置文件的相对路径，不要依赖默认查找逻辑
        config: './webpack.config.js',
        resolve: {
          // 开启对package.json exports字段的解析支持
          conditionNames: ['import', 'module', 'browser', 'main']
        }
      },
      // 增加node模块解析兜底规则
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx']
      }
    }
  }
}