每周依赖更新后ESLint报错：无法加载resolver "alias"（import/no-cycle规则）

问题背景 #

依赖更新后，ESLint检测抛出错误：

EslintPluginImportResolveError: unable to load resolver "alias".
Occurred while linting /TheForgotPasswordPage.stories.ts:5
Rule: "import/no-cycle"

对应导入代码：

import AddListener from "../../../../../.storybook/resources/msw/GetPayloadHelper.ts";

代码可正常运行，但ESLint检测不通过。

解决步骤 #

1. 补装缺失的解析器依赖 #

eslint-import-resolver-alias 是ESLint import插件解析别名的必要依赖，依赖更新时可能被意外移除或版本不兼容。执行命令补装：

npm install eslint-import-resolver-alias --save-dev
# 或使用yarn
yarn add eslint-import-resolver-alias -D

2. 校验ESLint配置中的解析器设置 #

打开项目的ESLint配置文件（如.eslintrc.js、.eslintrc.json），确认settings字段下的import/resolver配置是否正确，示例配置如下：

module.exports = {
  // ...其他配置项
  settings: {
    'import/resolver': {
      alias: {
        map: [
          // 根据实际项目结构配置别名映射，示例：
          ['@storybook-resources', './.storybook/resources']
        ],
        extensions: ['.ts', '.js', '.tsx', '.jsx']
      }
    }
  }
};

注意：

• 确保alias字段拼写无误，不要出现拼写错误
• 映射路径要和实际文件结构匹配，避免路径偏差导致解析失败

3. 排查循环导入可能性 #

虽然报错提示是解析器加载失败，但关联的是import/no-cycle规则，也可能是解析器异常导致ESLint误判循环。可手动检查：

• TheForgotPasswordPage.stories.ts 与 GetPayloadHelper.ts 之间是否存在直接或间接的循环导入（如A导入B，B通过其他文件又导入A）
• 若确实存在循环，可重构代码解耦：比如把共享逻辑抽为独立模块，或调整导入顺序

4. 临时应急方案（快速通过检测） #

如果暂时无法彻底解决问题，可在报错文件中针对性禁用规则：

// 在导入行上方添加单条禁用注释
// eslint-disable-next-line import/no-cycle
import AddListener from "../../../../../.storybook/resources/msw/GetPayloadHelper.ts";

// 或在文件顶部全局禁用（不推荐，仅应急使用）
/* eslint-disable import/no-cycle */

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