ESLint导入redux-saga时读取依赖内Webpack配置异常的原因及修复咨询

1. 为什么ESLint会尝试找node_modules/redux-saga/config/webpack.config.dev.js？ #

问题出在你配置的eslint-import-resolver-webpack插件的路径解析逻辑上：

• 你用相对路径./config/webpack.config.dev.js指定了webpack配置文件，这个路径本身是相对于你的项目根目录的。
• 但当插件解析第三方模块（比如redux-saga）的导入时，它会错误地把这个相对路径解析为相对于被导入模块的目录（也就是node_modules/redux-saga/），而不是你的项目根目录。
• 它会去这个不存在的路径找webpack配置文件，自然就抛出了“找不到模块”的错误。

2. 不修改导入解析器的前提下怎么解决？ #

这里有几个实用的方案，都不需要换掉webpack解析器：

方案一：改用绝对路径指定webpack配置

把ESLint配置从JSON格式改成JS格式（比如.eslintrc.js），然后用绝对路径指向你的webpack配置文件，这样插件就不会搞错路径了：

module.exports = {
  // 其他ESLint配置...
  settings: {
    "import/resolver": {
      "webpack": {
        // 用require.resolve确保路径是绝对的
        "config": require.resolve("./config/webpack.config.dev.js")
      }
    }
  }
};

方案二：在webpack配置里明确模块解析顺序

打开你的webpack.config.dev.js，在resolve字段里添加modules配置，把node_modules放在最前面，让webpack优先从第三方模块目录解析依赖：

const path = require('path');

module.exports = {
  // 其他webpack配置...
  resolve: {
    modules: ['node_modules', path.resolve(__dirname, 'src')]
  }
};

这样插件解析redux-saga时会直接从node_modules找到正确的模块，不会再错误地解析webpack配置路径。

方案三：排除node_modules目录的webpack解析

在ESLint的webpack解析器配置里添加exclude选项，让插件不对node_modules里的模块使用webpack解析，而是用默认的Node.js解析逻辑：

"settings": {
  "import/resolver": {
    "webpack": {
      "config": "./config/webpack.config.dev.js",
      "exclude": ["node_modules"]
    }
  }
}

这个方案最简单，适合不想改配置格式或webpack配置的场景。

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