Add support for ESlint 8.0 in `vue-eslint-parser`
Manuel-Suarez-Abascal opened this issue · 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 commandcd 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
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.
Thank you @Morl99, could you elaborate on how to apply this fix to an existing project?
No idea, I would hope that the maintainers would include it as an official backport release.
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.
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
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 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
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"
},
Several months later, still can't upgrade to ESLint v8 even though all the rest ecosystem's packages seem to be updated already?
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?
Can't believe this issue is still happening
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
Any update for when this will be resolved? Running into the same issue...
Same issue here
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?
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
?
Just bumped into the same problem ✋
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.
Is there any updates on this issue?
Waiting for updates...
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?
Now in 2023, still facing the same issue.
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! :)
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 thenvue add eslint
go through the steps with my preferences, then badaboong badabing all of the suddennpm 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
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.
still got this in 2023.
It stills apear in 2024
Look forward to seeing it still opened in 2025 🖖🏻