为啥在创建新的 eslint-plugin 后“vue-cli-service build”会失败，并出现错误“TypeError: eslint.CLIEngine is not a constru

Posted 2023-02-22

【中文标题】为啥在创建新的 eslint-plugin 后“vue-cli-service build”会失败，并出现错误“TypeError: eslint.CLIEngine is not a constructor”？

【英文标题】：Why does 'vue-cli-service build' fail after creating a new eslint-plugin, with error 'TypeError: eslint.CLIEngine is not a constructor'?为什么在创建新的 eslint-plugin 后“vue-cli-service build”会失败，并出现错误“TypeError: eslint.CLIEngine is not a constructor”？

【发布时间】：2020-04-24 03:07:34

【问题描述】：

为自定义规则创建新的 eslint-plugin 后，vue-cli-service build 失败（eslint 按预期工作，由./node_modules/.bin/eslint --ext .js,.vue,.json ./ --max-warnings=0 触发）。

GitHub repository reproducing issue

在vue-cli-service build 工作的环境中开始，遵循https://blog.webiny.com/create-custom-eslint-rules-in-2-minutes-e3d41cb6a9a0 的简化说明，也会重现此问题。在每一步之后运行vue-cli-service build，在第4步之后开始失败：yarn add --dev file:./eslint，并且在所有步骤完成后构建仍然失败。

错误信息：

ERROR  Failed to compile with 32 errors      

Module build failed (from ./node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js):
TypeError: eslint.CLIEngine is not a constructor
   at Object.module.exports (MYPATH/node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js:223:27)

***repeats 31 more times***

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
ERROR  Build failed with errors.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

vue-cli-service build 在运行yarn install 后仍然失败，这表示它已经是最新的。

此特定TypeError: eslint.CLIEngine is not a constructor 错误声明the user should upgrade their JetBrains IDE 的大多数结果。但是，我在命令行上运行 vue-cli-service build，而不是使用 JetBrains。

错误消息引用的代码是（带有前面的上下文）：

MYPATH/node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js

...
var config = assign(
    // loader defaults
    
      cacheIdentifier: JSON.stringify(
        "eslint-loader": pkg.version,
        eslint: eslintVersion || "unknown version"
      ),
      eslintPath: "eslint"
    ,
    userOptions
  );

  if (typeof config.formatter === "string") 
    try 
      config.formatter = require(config.formatter);
      if (
        config.formatter &&
        typeof config.formatter !== "function" &&
        typeof config.formatter.default === "function"
      ) 
        config.formatter = config.formatter.default;
      
     catch (_) 
      // ignored
    
  

  var cacheDirectory = config.cache;
  var cacheIdentifier = config.cacheIdentifier;

  delete config.cacheIdentifier;

  // Create the engine only once per config
  var configHash = objectHash(config);

  if (!engines[configHash]) 
    var eslint = require(config.eslintPath);
    engines[configHash] = new eslint.CLIEngine(config); //Error happens here
  
...

编辑：在下面@DelenaMalan 的建议下，我通过编辑yarn 的package.json 将@vue/cli-plugin-eslint 从版本3.11.0 升级到了4.1.2。构建仍然失败并出现错误：

ERROR  Failed to compile with 1 errors                                                                                                            7:51:01 PM

Module build failed (from ./node_modules/@vue/cli-service/node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
eslint.CLIEngine is not a constructor
    at PoolWorker.fromErrorObj (MYPATH/node_modules/@vue/cli-service/node_modules/thread-loader/dist/WorkerPool.js:262:12)
    at MYPATH/node_modules/@vue/cli-service/node_modules/thread-loader/dist/WorkerPool.js:204:29
    at mapSeries (MYPATH/node_modules/neo-async/async.js:3625:14)
    at PoolWorker.onWorkerMessage (MYPATH/node_modules/@vue/cli-service/node_modules/thread-loader/dist/WorkerPool.js:170:35)
    at readBuffer (MYPATH/node_modules/@vue/cli-service/node_modules/thread-loader/dist/WorkerPool.js:152:14)
    at Object.module.exports (MYPATH/node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js:223:27)

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
 ERROR  Build failed with errors.
error Command failed with exit code 1.

编辑 2： 按照@CGundlach 的建议，我删除并重新安装了链接here 的repro 上的节点模块，但我仍然有eslint.CLIEngine is not a constructor 错误

Annas-MacBook-Pro:eslint-test-project anna$ rm -rf node_modules/
Annas-MacBook-Pro:eslint-test-project anna$ yarn install
yarn install v1.21.1
[1/4] ????  Resolving packages...
[2/4] ????  Fetching packages...
[3/4] ????  Linking dependencies...
warning "@vue/eslint-config-airbnb > eslint-import-resolver-webpack@0.11.1" has unmet peer dependency "webpack@>=1.11.0".
[4/4] ????  Building fresh packages...
✨  Done in 14.14s.
Annas-MacBook-Pro:eslint-test-project anna$ yarn build
yarn run v1.21.1
$ vue-cli-service build

⠏  Building for production...

 ERROR  Failed to compile with 1 errors                                                                                                           12:28:32 PM

Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
eslint.CLIEngine is not a constructor
    at PoolWorker.fromErrorObj (/Users/anna/projects/yarn-vue-eslint/eslint-test-project/node_modules/thread-loader/dist/WorkerPool.js:262:12)
    at /Users/anna/projects/yarn-vue-eslint/eslint-test-project/node_modules/thread-loader/dist/WorkerPool.js:204:29
    at mapSeries (/Users/anna/projects/yarn-vue-eslint/eslint-test-project/node_modules/neo-async/async.js:3625:14)
    at PoolWorker.onWorkerMessage (/Users/anna/projects/yarn-vue-eslint/eslint-test-project/node_modules/thread-loader/dist/WorkerPool.js:170:35)
    at readBuffer (/Users/anna/projects/yarn-vue-eslint/eslint-test-project/node_modules/thread-loader/dist/WorkerPool.js:152:14)
    at Object.module.exports (/Users/anna/projects/yarn-vue-eslint/eslint-test-project/node_modules/eslint-loader/index.js:223:27)

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
 ERROR  Build failed with errors.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

【问题讨论】：

我了解到您已尝试使用 yarn install 更新插件，但该命令不会更新依赖项（yarn upgrade 会）。也许只是通过运行yarn list | grep "@vue/cli-plugin-eslint"（目前的最新版本是 4.1.2）来仔细检查您是否拥有最新版本的插件。

@DelenaMalan 我通过编辑 yarn 的 package.json 将 @vue/cli-plugin-eslint 从版本 3.11.0 升级到了 4.1.2，但我的构建仍然失败。我已经用错误更新了问题。我再次通过 grepping yarn list 验证了我的手动升级成功，这证实我现在使用的是 4.1.2 版。

无法重现。我用vue create eslint-test-project 创建了一个新的vue 项目，然后按照您链接的教程中概述的步骤操作，最后用npx vue-cli-service build 运行构建服务。虽然我使用的是 NPM 而不是纱线，所以这可能是一个错误来源。您能否提供一个展示该错误以进行更多调试的存储库？

我现在在问题中添加了link to a github repo reproducing the issue。 repo 产生的确切错误消息（仍然包括eslint.CLIEngine is not a constructor）列在其自述文件中。

当我下载你的仓库时，运行yarn install和yarn build，构建成功。您是否尝试过删除您的 node_modules 文件夹并使用 yarn install 重建它？奇怪的是，yarn.lock 中缺少包 eslint，尽管它位于 package.json 中并且在运行 yarn install 时已安装。

【参考方案1】：

确保在运行 npm ci、npm i 或 yarn install 时解决所有警告。对我来说，在进行全新安装后会显示以下警告：

$ vue-cli-service build

⠧  Building for production...

 ERROR  Failed to compile with 1 error                           20:47:55

Syntax Error: Thread Loader (Worker 0)
eslint.CLIEngine is not a constructor


You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

当我进行全新安装并通过降低我的 eslint 版本来解决对等依赖问题时，一切都按预期工作。

因此，请尝试将您的 eslint 依赖项降级到正确的版本。对我来说，我不得不降级到eslint

npm i -D eslint@6.8.0
# or yarn
yarn add -D eslint@6.8.0