Add support for ESlint 8.0 in `vue-eslint-parser`

[Manuel-Suarez-Abascal]

Version

Vue CLI:  4.5.14

Environment info

Node version: v14.17.0
npm version: 6.14.13
Local ESLint version: 8.0.1
Operating System: macOS Big Sur

What did you do?

I'm using Vue CLI & after upgrading ESlint from version 7.32.0 to 8.0.1 I get the error Syntax Error: TypeError: eslint.CLIEngine is not a constructor after launching the project for development with npm run serve.

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "@vue/prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  },
  parserOptions: {
    parser: "babel-eslint"
  }
};

Steps to reproduce

• Install Vue CLI globally, run the command: npm install -g @vue/cli.
• Create a project, run the command vue create todo-list-vue.
• Navigate to the project & install the latest version of ESlint, run the command cd todo-list-vue && npm install eslint@latest.
• Launch the project for development, run the command npm run serve.

You will get the following error in the console: Syntax Error: TypeError: eslint.CLIEngine is not a constructor

What is expected?

Before upgrading ESlint, I was able to launch the project for development without issues.

What is actually happening?

I got this error: Syntax Error: TypeError: eslint.CLIEngine is not a constructor & my code won't compile for development.

Related link

Bug: TypeError: this.cliEngine is not a constructor

[Morl99]

This is already fixed in #6714 so a backport to the v4 line would be necessary. I think it would be great to support eslint 8 in vue-cli 4.x, since it will take people a while even after the v5 release to migrate their projects, and it would be problematic, to be stuck with eslint 7 in that case.

[coyr]

Thank you @Morl99, could you elaborate on how to apply this fix to an existing project?

[Morl99]

No idea, I would hope that the maintainers would include it as an official backport release.

[coyr]

In my case, I needed to keep working on an existing project. I have tried to work with 7.32.0 and it was also getting errors. I have updated the package.json with “eslint”: “^7.0.0". Run npm install and npm serve and it is working again.

[kvdmolen]

This worked for me for an existing project:

1. Remove all lines with lint from package.json
2. Remove the (hidden!) eslint config files.
3. Remove all globally installed lint packages, if any: $ npm uninstall -g eslint
4. $ npm prune to remove unused packages
5. $ vue add eslint and follow steps.

It gave me eslint version 6.x.x

[vshuy]

this is worked for me, if you have old version package.json and package.lock on github, you delete node modules folder and two files above from currently project then used two file from github instead, finally run npm install