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

Question

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

Manuel-Suarez-Abascal opened this issue 3 years ago · comments

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

Carsten Hoffmann · Answer 1 · Mon Oct 18 2021 23:21:06 GMT+0800 (China Standard Time)

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.

Alejandro Barrero · Answer 2 · Thu Oct 21 2021 20:41:42 GMT+0800 (China Standard Time)

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

Carsten Hoffmann · Answer 3 · Thu Oct 21 2021 22:47:31 GMT+0800 (China Standard Time)

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

Alejandro Barrero · Answer 4 · Thu Oct 21 2021 23:38:35 GMT+0800 (China Standard Time)

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.

Klaas van der Molen · Answer 5 · Fri Oct 22 2021 12:09:46 GMT+0800 (China Standard Time)

This worked for me for an existing project:

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

It gave me eslint version 6.x.x

Vũ Sinh Huy · Answer 6 · Tue Nov 02 2021 09:25:12 GMT+0800 (China Standard Time)

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

Vc3nt · Answer 7 · Tue Nov 09 2021 16:44:44 GMT+0800 (China Standard Time)

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

Khaled Osman · Answer 8 · Tue Nov 09 2021 17:02:31 GMT+0800 (China Standard Time)

@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

Vũ Sinh Huy · Answer 9 · Tue Nov 09 2021 23:15:34 GMT+0800 (China Standard Time)

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"
},

Janne Kurkinen · Answer 10 · Wed Dec 15 2021 18:08:51 GMT+0800 (China Standard Time)

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

Douglas Gaskell · Answer 11 · Fri Dec 17 2021 06:48:19 GMT+0800 (China Standard Time)

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 · Answer 12 · Fri Dec 24 2021 03:06:09 GMT+0800 (China Standard Time)

Can't believe this issue is still happening

shamsail · Answer 13 · Mon Jan 10 2022 18:11:12 GMT+0800 (China Standard Time)

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

Matt Portrey · Answer 14 · Sun Jan 16 2022 05:25:38 GMT+0800 (China Standard Time)

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

Nico Devs · Answer 15 · Wed Jan 19 2022 21:14:59 GMT+0800 (China Standard Time)

Same issue here

BlueSkunka · Answer 16 · Tue Jan 25 2022 20:16:28 GMT+0800 (China Standard Time)

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

Ken Martin · Answer 17 · Sat Feb 05 2022 07:11:37 GMT+0800 (China Standard Time)

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?

Ken Martin · Answer 18 · Tue Feb 08 2022 06:22:38 GMT+0800 (China Standard Time)

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 · Answer 19 · Mon Feb 14 2022 19:03:59 GMT+0800 (China Standard Time)

Just bumped into the same problem ✋

undergroundwires · Answer 20 · Sat Mar 05 2022 22:04:11 GMT+0800 (China Standard Time)

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:

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

Downgrading to 7.32.0 works fine.

Manuel Abascal · Answer 21 · Sat Apr 23 2022 02:06:16 GMT+0800 (China Standard Time)

Is there any updates on this issue?

Rodolfo Santos · Answer 22 · Wed May 25 2022 02:40:22 GMT+0800 (China Standard Time)

Waiting for updates...

Vamsi Ampolu · Answer 23 · Fri Oct 28 2022 08:29:03 GMT+0800 (China Standard Time)

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?

Jerry Yu · Answer 24 · Fri Jan 06 2023 14:13:31 GMT+0800 (China Standard Time)

Now in 2023, still facing the same issue.

Corona · Answer 25 · Tue Jan 17 2023 13:42:24 GMT+0800 (China Standard Time)

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! :)

Jerry Yu · Answer 26 · Tue Jan 17 2023 14:36:24 GMT+0800 (China Standard Time)

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

N. D. · Answer 27 · Thu May 11 2023 18:05:07 GMT+0800 (China Standard Time)

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 · Answer 28 · Tue Sep 12 2023 11:21:51 GMT+0800 (China Standard Time)

still got this in 2023.

Scofield · Answer 29 · Tue Jan 16 2024 11:51:19 GMT+0800 (China Standard Time)

It stills apear in 2024

Manuel Abascal · Answer 30 · Wed Jan 17 2024 01:46:47 GMT+0800 (China Standard Time)

Look forward to seeing it still opened in 2025 🖖🏻