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 https://github.com/vuejs/vue-cli/pull/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

[Sovai]

How to solve this issue temporarily? I have these dependencies installed

[khaledosman]

@Sovai downgrade eslint to v 7.32.0 and you're good to go , see https://github.com/khaledosman/vue-realworld-example-app for an example

[vshuy]

here is my last stable version, i hope it will save someone's time "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "^3.1.1", "@vue/cli-service": "^4.5.13", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", "vue-loader": "^15.9.8", "vue-template-compiler": "^2.6.14", "webpack-cli": "^4.8.0" },

[ux-engineer]

Several months later, still can't upgrade to ESLint v8 even though all the rest ecosystem's packages seem to be updated already?

[douglasg14b]

Seriously. Just spent the better part of a day upgrading packages to support eslint8 since a dev dependency requires eslint ^8.0.0 it and now.... this is the problem, and we're essentially stuck?

[naregkhodanian]

Can't believe this issue is still happening

[shamsail]

And it's still happening with v8. So, I have downgraded and using this combination.

"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",

It will work for others as well. Edit: change these into package.json file and to install properly, first remove/delete node_modules and package_lock.json file and npm install again after updating package.json file

[MaddyTP]

Any update for when this will be resolved? Running into the same issue...

[nicodevs]

Same issue here

[BlueSkunka]

Issue still appearing, temporary fixed with @kvdmolen comment backwarding to eslint 6.7.

[papakpmartin]

Same issue here.

@yyx990803 or @sodatea, this has been open a while. Can you provide any kind of a status or update? Is there maybe some specialized help that you need in order to do this?

[papakpmartin]

Well, I can't speak for @yyx990803 but perhaps this commit of his is the update? Does this mean we must either (a) use Vite or (b) stick with eslint@^7.5.0 and eslint-plugin-vue@^8.0.1?

[karel-mistrik]

Just bumped into the same problem :hand:

[undergroundwires]

Using ESLint 8.X.X fails to run unit-tests for me with following error:

Logs

 ERROR  Failed to compile with 2 errors

The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received 'http://localhost/eslintrc.cjs'

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: Child compilation failed:
  The argument 'filename' must be a file URL object, file URL string, or absolute path string. Recei  ved 'http://localhost/eslintrc.cjs'
  
  - child-compiler.js:169 
    [privacy.sexy]/[html-webpack-plugin]/lib/child-compiler.js:169:18
  
  - Compiler.js:559 
    [privacy.sexy]/[webpack]/lib/Compiler.js:559:11
  
  - Compiler.js:1129 
    [privacy.sexy]/[webpack]/lib/Compiler.js:1129:17
  
  
  - task_queues:96 processTicksAndRejections
    node:internal/process/task_queues:96:5
  

 WEBPACK  Failed to compile with 2 error(s)

Error 

  The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received 'http://localhost/eslintrc.cjs'

Error 

    Error: Child compilation failed:
    The argument 'filename' must be a file URL object, file URL string, or absolute path string. Recei  ved 'http://localhost/eslintrc.cjs'
    
    - child-compiler.js:169 
      [privacy.sexy]/[html-webpack-plugin]/lib/child-compiler.js:169:18
    
    - Compiler.js:559 
      [privacy.sexy]/[webpack]/lib/Compiler.js:559:11
    
    - Compiler.js:1129 
      [privacy.sexy]/[webpack]/lib/Compiler.js:1129:17
    
    
    - task_queues:96 processTicksAndRejections
      node:internal/process/task_queues:96:5

  [=========================] 100% (completed)

 ERROR  Error: mochapack exited with code 1.
Error: mochapack exited with code 1.
    at ChildProcess.<anonymous> (/../dev/undergroundwires/privacy.sexy/node_modules/@vue/cli-plugin-unit-mocha/index.js:86:18)
    at ChildProcess.emit (node:events:532:35)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)

Reproduce:

1. git clone https://github.com/undergroundwires/privacy.sexy
2. git switch bump
3. npm run install, npm run test

Downgrading to 7.32.0 works fine.

[Manuel-Suarez-Abascal]

Is there any updates on this issue?

[rodolfo-santos]

Waiting for updates...

[vamsiampolu]

I am facing an issue with using the es2022 feature class-properties which is essentially the ability to always bind a method to an instance:

class Foo {
  ...
  isBlah = (arg) => { ... };
}

This is supported by using ecmaVersion: 13 supported in eslint^8.0.1 and above. However, using @vue/cli-plugin-eslint at version 4.5.17 still causes the issue described above:

From the comments above, it has been mentioned that the issue must be fixed in v4.x of the package but it does not seem to be.

Is this considered a bug that needs to be addressed in v4?

[yubaoquan]

Now in 2023, still facing the same issue.

[GAMESTER90]

Now in 2023, still facing the same issue.

Holdon there just a minute buddy,

So basically I forgot where I saw this (stack overflow pretty sure), but as I was closing my tabs after a successful hotfix from this issue, I came back to this thread and saw your comment, so let me share my solution.

I realized that whenever I did npm audit fix --force, (thanks to my OCD that did it multiple times enough to remember for ya) something within my vue3 project gets beaten out of configuration obviously being eslint for some reason, (idk I just use other peoples code and try to understand it).

So I just do npm uninstall eslint --force and then vue add eslint go through the steps with my preferences, then badaboong badabing all of the sudden npm run serve works just fine without eslint flaking on me.

I was in your same situation a hour or two ago man it was frustrating hopefully my solution works for you or anyone else out there! :)

[yubaoquan]

Now in 2023, still facing the same issue.

Holdon there just a minute buddy,

So basically I forgot where I saw this (stack overflow pretty sure), but as I was closing my tabs after a successful hotfix from this issue, I came back to this thread and saw your comment, so let me share my solution.

I realized that whenever I did npm audit fix --force, (thanks to my OCD that did it multiple times enough to remember for ya) something within my vue3 project gets beaten out of configuration obviously being eslint for some reason, (idk I just use other peoples code and try to understand it).

So I just do npm uninstall eslint --force and then vue add eslint go through the steps with my preferences, then badaboong badabing all of the sudden npm run serve works just fine without eslint flaking on me.

I was in your same situation a hour or two ago man it was frustrating hopefully my solution works for you or anyone else out there! :)

It seems that your steps is to uninstall eslint and then install eslint without specified version number (please correct me if I understood wrong). If that result in installing eslint v6 or v7, of course the error will gone. But it is not related to this issue. Because what we are asking for is supporting eslint 8.x

[set-killer]

Why does vue-eslint-parser still uses the package 'babel-eslint'? This package has been deprecated about 3 years ago: https://www.npmjs.com/package/babel-eslint

Author message:
babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.

I have tried to replace babel-eslint with @babel/eslint-parser in my package.json file but then i have this error when running eslint:

  0:0  error  Parsing error: Cannot find module 'babel-eslint'
Require stack:
- /home/path/to/project/node_modules/vue-eslint-parser/index.js
- /home/path/to/project/node_modules/eslint-plugin-vue/lib/utils/index.js
- /home/path/to/project/node_modules/eslint-plugin-vue/lib/rules/array-bracket-newline.js
- /home/path/to/project/node_modules/eslint-plugin-vue/lib/index.js
- /home/path/to/project/node_modules/@eslint/eslintrc/lib/config-array-factory.js
- /home/path/to/project/node_modules/@eslint/eslintrc/lib/index.js
- /home/path/to/project/node_modules/eslint/lib/cli-engine/cli-engine.js
- /home/path/to/project/node_modules/eslint/lib/cli-engine/index.js
- /home/path/to/project/node_modules/eslint/lib/api.js
- /home/path/to/project/package.json

Probably if there is a way to replace babel-eslint with @babel/eslint-parser It would be possible to use eslint 8.

[axetroy]

still got this in 2023.

[dh336699]

It stills apear in 2024

[Manuel-Suarez-Abascal]

Look forward to seeing it still opened in 2025 🖖🏻