[问题解决]eslint-plugin-import 找不到文件导致 eslint 整体挂掉的问题

[yubaoquan]

现象

在 vscode 写代码的过程中, 不知道什么时候 eslint 突然挂了, 无法 lint 文件了.

排查

第一步

看到 vscode 底部状态栏里的 eslint 按钮变黄了.
点击 eslint 按钮, 切到 output 面板中的 eslint 日志, 发现有报错

[Info  - 10:22:00 PM] ESLint library loaded from: /Users/xxxxx/node_modules/eslint/lib/api.js
[Error - 10:22:04 PM] Cannot read config file: /Users/xxxxx/.eslintrc.cjs Error: Module._extensions[extension] is not a function

意思是 eslint 突然加载不到配置文件了?
一开始看到第二句报错信息时我还以为是因为增加了哪个 npm 包导致 eslint 的某个依赖被改了版本继而导致版本不兼容. 然后 google 了一下 Eslint Error: Module._extensions[extension] is not a function, 没有获取到什么有用的信息

第二步

反复重启 eslint server, 发现一个现象, 只有打开某个特定的文件 index.ts 时, eslint 才会挂. 而在 eslint 挂掉之前, 打开其他 js 文件, 是没有问题的. 所以推断是和 index.ts 文件有关.

第三步

重启 eslint server, 切到 problems 面板, 打开导致 eslint 挂掉的 ts 文件, 发现 problems 中出现了比 output 更详细的报错内容:

[{
	"resource": "/xxxxx/src/main/db/sqlite/index.ts",
	"owner": "eslint",
	"code": {
		"value": "import/namespace",
		"target": {
			"$mid": 1,
			"path": "/import-js/eslint-plugin-import/blob/v2.29.1/docs/rules/namespace.md",
			"scheme": "https",
			"authority": "github.com"
		}
	},
	"severity": 8,
	"message": "Resolve error: Cannot find module '/xxxxx/node_modules/knex/knex'. Please verify that the package.json has a valid \"main\" entry\n    at tryPackage (node:internal/modules/cjs/loader:445:19)\n    at Module._findPath (node:internal/modules/cjs/loader:687:18)\n    at findModulePath (/xxxxx/node_modules/eslint-import-resolver-alias/index.js:99:27)\n    at exports.resolve (/xxxxx/node_modules/eslint-import-resolver-alias/index.js:75:10)\n    at withResolver (/xxxxx/node_modules/eslint-module-utils/resolve.js:121:23)\n    at fullResolve (/xxxxx/node_modules/eslint-module-utils/resolve.js:142:22)\n    at relative (/xxxxx/node_modules/eslint-module-utils/resolve.js:158:10)\n    at resolve (/xxxxx/node_modules/eslint-module-utils/resolve.js:232:12)\n    at ExportMap.get (/xxxxx/node_modules/eslint-plugin-import/lib/ExportMap.js:801:392)\n    at processBodyStatement (/xxxxx/node_modules/eslint-plugin-import/lib/rules/namespace.js:11:40)",
	"source": "eslint",
	"startLineNumber": 1,
	"startColumn": 1,
	"endLineNumber": 1,
	"endColumn": 1
}]

原来是 eslint-plugin-import 找不到 knex 这个包的入口文件. 是的, 我在 index.ts 中引入了一个 npm 包

import knex from 'knex';

检查了一下 node_modules, 发现 knex 这个包是安装好了的, 它的 package.json 中的 main 是 "main": "knex". 这个包中存在 knex.js 和 knex.mjs 两个文件. 我用 import 的方式引入, 应该是引入 knex.mjs. 会不会是 eslint-plugin-import 不认.mjs 文件呢?

我的 eslint 配置中使用的 eslint-plugin-import 配置如下

{
//...
  settings: {
    'import/resolver': {
      alias: {
        map: [
          ['@', './src'],
          ['@main', './src/main'],
          ['@renderer', './src/renderer/src'],
        ],
        extensions: ['.ts'],
      },
    },
  },
//...
}

试着把 .mjs 添加到 extensions 中

extensions: ['.ts', '.mjs'],

然后重启 eslint server, 果然问题不见了, eslint 可以正常检测到 lint 问题并自动修复了.

结论

在检测代码的过程中, 错误的配置会在检查某个代码片段时触发 eslint 插件抛出异常, 继而导致整个 eslint 崩溃.