Why does 'vue-cli-service build' fail after creating a new eslint-plugin, with error 'TypeError: eslint.CLIEngine is not a constructor'?

Question

After creating a new eslint-plugin for a custom rule, vue-cli-service build fails (eslint works as expected, when triggered by ./node_modules/.bin/eslint --ext .js,.vue,.json ./ --max-warnings=0).

GitHub repository reproducing issue

Starting in an environment with a working vue-cli-service build, following the simplified instructions at https://blog.webiny.com/create-custom-eslint-rules-in-2-minutes-e3d41cb6a9a0, also reproduces the issue. Running vue-cli-service build after every step, it starts failing after step 4: yarn add --dev file:./eslint, and the build still fails after all the steps are completed.

Error message:

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 stills fails after running yarn install, which says it is already up to date.

Most results for this specific TypeError: eslint.CLIEngine is not a constructor error claim the user should upgrade their JetBrains IDE. However, I am running vue-cli-service build on the command line and not using JetBrains.

The code referred to by the error message is (with preceding context):

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
  }
...

Edit: I upgraded @vue/cli-plugin-eslint from version 3.11.0 to 4.1.2 by editing yarn's package.json, at the suggestion of @DelenaMalan below. The build still fails with error:

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.

Edit 2: I deleted and reinstalled the node modules on the repro linked here, as recommended by @CGundlach, but I still have the eslint.CLIEngine is not a constructor error

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 > [email protected]" 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.

Answer 1

Make sure all warnings are resolved when you run either npm ci, npm i or yarn install. For me the following warnings were showed after doing a fresh 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.

When I did a fresh install and resolved the peer dependency issue by decreasing my eslint version everything works as expected.

So try to downgrade your eslint dependency to the correct version. For me I had to downgrade to eslint < 7.0.0.

npm i -D [email protected]
# or yarn
yarn add -D [email protected]