Cannot install ESLint with `vue add eslint` through ui or cli #5256

vegerot · 2020-03-10T13:07:23Z

Version

4.2.2

Environment info

❯ vue info

Environment Info:

  System:
    OS: macOS 10.15.3
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
  Binaries:
    Node: 13.10.1 - /usr/local/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.14.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 81.0.4044.34
    Firefox: Not Found
    Safari: 13.0.5
  npmPackages:
    @types/vue: ^2.0.0 => 2.0.0
    @types/vue-moment: ^4.0.0 => 4.0.0
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.1.2
    @vue/babel-preset-app:  3.12.1
    @vue/babel-preset-jsx:  1.1.2
    @vue/babel-sugar-functional-vue:  1.1.2
    @vue/babel-sugar-inject-h:  1.1.2
    @vue/babel-sugar-v-model:  1.1.2
    @vue/babel-sugar-v-on:  1.1.2
    @vue/cli-overlay:  4.2.2
    @vue/cli-plugin-babel: ^3.11.0 => 3.12.1
    @vue/cli-plugin-e2e-cypress: ^3.11.0 => 3.12.1
    @vue/cli-plugin-eslint: ^4.2.3 => 4.2.3
    @vue/cli-plugin-pwa: ^3.11.0 => 3.12.1
    @vue/cli-plugin-router:  4.2.2
    @vue/cli-plugin-typescript: ^3.11.0 => 3.12.1
    @vue/cli-plugin-unit-jest: ^4.0.5 => 4.2.2
    @vue/cli-plugin-vuex:  4.2.2
    @vue/cli-service: ^4.1.2 => 4.2.2
    @vue/cli-shared-utils:  3.12.1 (4.2.3, 4.2.2)
    @vue/component-compiler-utils:  3.1.1
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0
    @vue/eslint-config-standard: ^5.1.0 => 5.1.2
    @vue/eslint-config-typescript: ^5.0.1 => 5.0.1
    @vue/preload-webpack-plugin:  1.1.1
    @vue/test-utils: 1.0.0-beta.29 => 1.0.0-beta.29
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^6.0.0 => 6.2.1
    jest-serializer-vue:  2.0.2
    typescript: ^3.4.3 => 3.8.2
    vue: ^2.6.10 => 2.6.11
    vue-class-component: ^7.0.2 => 7.2.3
    vue-cli-plugin-vuetify: ^0.6.3 => 0.6.3
    vue-cookies-ts: ^1.5.17 => 1.5.19
    vue-eslint-parser:  7.0.0
    vue-hot-reload-api:  2.3.4
    vue-jest:  3.0.5
    vue-loader:  15.9.0
    vue-moment: ^4.1.0 => 4.1.0
    vue-property-decorator: ^8.1.0 => 8.4.0
    vue-router: ^3.0.3 => 3.1.6
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.10 => 2.6.11
    vue-template-es2015-compiler:  1.9.1
    vuetify: ^2.1.10 => 2.2.15
    vuex: ^3.0.1 => 3.1.2
    vuex-class: ^0.3.2 => 0.3.2
  npmGlobalPackages:
    @vue/cli: 4.2.3

Steps to reproduce

run vue add eslint or add the eslint plugin through the "Plugins" tab in vue ui

What is expected?

eslint should install successfully

What is actually happening?

posting on PasteBin because I'm getting a 414 request-uri to large error:
https://pastebin.com/NeRnhRiJ

when installing through Vue CLI:

❯ vue add eslint
 WARN  There are uncommited changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes
 
📦  Installing @vue/cli-plugin-eslint...
 
+ @vue/cli-plugin-eslint@4.2.3
updated 1 package and audited 947067 packages in 9.628s
 
45 packages are looking for funding
  run `npm fund` for details
 
found 25 moderate severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
✔  Successfully installed plugin: @vue/cli-plugin-eslint
 
? Pick an ESLint config: Basic
? Pick additional lint features: Lint and fix on commit
 
🚀  Invoking generator for @vue/cli-plugin-eslint...
 WARN  conflicting versions for project dependency "eslint":
 
- ^5.16.0 injected by generator "undefined"
- ^6.7.2 injected by generator "@vue/cli-plugin-eslint"
 
Using newer version (^6.7.2), but this may cause build errors.
 WARN  conflicting versions for project dependency "lint-staged":
 
- ^8.1.5 injected by generator "undefined"
- ^9.5.0 injected by generator "@vue/cli-plugin-eslint"
 
Using newer version (^9.5.0), but this may cause build errors.
 ERROR  SyntaxError: Unexpected token / in JSON at position 652
SyntaxError: Unexpected token / in JSON at position 652
    at JSON.parse (<anonymous>)
    at Object.read (/usr/local/lib/node_modules/@vue/cli/lib/util/configTransforms.js:44:30)
    at ConfigTransform.transform (/usr/local/lib/node_modules/@vue/cli/lib/ConfigTransform.js:25:30)
    at extract (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:198:37)
    at Generator.extractConfigFiles (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:211:9)
    at Generator.generate (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:173:10)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async runGenerator (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:109:3)
    at async invoke (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:90:3)

when installing through vue ui:

❯ vue ui
🚀  Starting GUI...
🌠  Ready on http://localhost:8000
+ @vue/cli-plugin-eslint@4.2.3
added 12 packages from 6 contributors, removed 1 package, updated 3 packages and audited 947067 packages in 10.652s
 
45 packages are looking for funding
  run `npm fund` for details
 
found 25 moderate severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
 WARN  conflicting versions for project dependency "eslint":
 
- ^5.16.0 injected by generator "undefined"
- ^6.7.2 injected by generator "@vue/cli-plugin-eslint"
 
Using newer version (^6.7.2), but this may cause build errors.
 WARN  conflicting versions for project dependency "lint-staged":
 
- ^8.1.5 injected by generator "undefined"
- ^9.5.0 injected by generator "@vue/cli-plugin-eslint"
 
Using newer version (^9.5.0), but this may cause build errors.
 ERROR  SyntaxError: Unexpected token / in JSON at position 652
SyntaxError: Unexpected token / in JSON at position 652
    at JSON.parse (<anonymous>)
    at Object.read (/usr/local/lib/node_modules/@vue/cli/lib/util/configTransforms.js:44:30)
    at ConfigTransform.transform (/usr/local/lib/node_modules/@vue/cli/lib/ConfigTransform.js:25:30)
    at extract (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:198:37)
    at Generator.extractConfigFiles (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:211:9)
    at Generator.generate (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:173:10)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async runGenerator (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:109:3)
    at async invoke (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:90:3)
Error: Command failed: vue invoke @vue/cli-plugin-eslint --$inlineOptions {"config":"standard","lintOn":["save","commit"]}
 
🚀  Invoking generator for @vue/cli-plugin-eslint...
 
    at makeError (/usr/local/lib/node_modules/@vue/cli/node_modules/execa/index.js:174:9)
    at /usr/local/lib/node_modules/@vue/cli/node_modules/execa/index.js:278:16
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async /usr/local/lib/node_modules/@vue/cli/node_modules/@vue/cli-ui/apollo-server/connectors/plugins.js:472:7
    at async Object.wrap (/usr/local/lib/node_modules/@vue/cli/node_modules/@vue/cli-ui/apollo-server/connectors/progress.js:39:14) {
  code: 1,
  stdout: '\n🚀  Invoking generator for @vue/cli-plugin-eslint...\n',
  stderr: null,
  failed: true,
  signal: null,
  cmd: 'vue invoke @vue/cli-plugin-eslint --$inlineOptions {"config":"standard","lintOn":["save","commit"]}',
  timedOut: false,
  killed: false
}
^C

Noticed this problem here

The text was updated successfully, but these errors were encountered:

haoqunjiang · 2020-03-10T13:16:34Z

How about npm install @vue/cli-plugin-eslint@3 and vue invoke eslint?

It's due to incompatibilities between @vue/cli-plugin-typescript v3 and @vue/cli-plugin-eslint v4.

vegerot · 2020-03-10T13:26:01Z

@sodatea can I update those two packages and have it work? I'll try your suggestion in a few.

haoqunjiang · 2020-03-10T13:31:24Z

After successful installation, run vue upgrade eslint and vue upgrade typescript would fix it.

vegerot · 2020-03-13T15:02:02Z

@sodatea apologies. I tried it again and got

❯ npm i @vue/cli-plugin-eslint@3
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
+ @vue/cli-plugin-eslint@3.12.1
added 73 packages from 117 contributors and audited 2149220 packages in 10.515s

44 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

❯ vue invoke eslint
 WARN  There are uncommited changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes
? Pick an ESLint config: Standard
? Pick additional lint features: Lint and fix on commit

🚀  Invoking generator for @vue/cli-plugin-eslint...
 WARN  conflicting versions for project dependency "lint-staged":

- ^10.0.8 injected by generator "undefined"
- ^8.1.5 injected by generator "@vue/cli-plugin-eslint"

Using newer version (^10.0.8), but this may cause build errors.
 ERROR  SyntaxError: Unexpected token / in JSON at position 652
SyntaxError: Unexpected token / in JSON at position 652
    at JSON.parse (<anonymous>)
    at Object.read (/usr/local/lib/node_modules/@vue/cli/lib/util/configTransforms.js:44:30)
    at ConfigTransform.transform (/usr/local/lib/node_modules/@vue/cli/lib/ConfigTransform.js:25:30)
    at extract (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:198:37)
    at Generator.extractConfigFiles (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:211:9)
    at Generator.generate (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:173:10)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async runGenerator (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:109:3)
    at async invoke (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:90:3)

vegerot · 2020-03-13T15:07:13Z

A similar problem: when trying to do vue invoke typescript I'm getting similar errors

❯ vue invoke typescript
 WARN  There are uncommited changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use TSLint? No
? Convert all .js files to .ts? Yes
? Allow .js files to be compiled? No

🚀  Invoking generator for @vue/cli-plugin-typescript...
 WARN  conflicting versions for project dependency "typescript":

- ^3.8.3 injected by generator "undefined"
- ~3.7.5 injected by generator "@vue/cli-plugin-typescript"

Using newer version (^3.8.3), but this may cause build errors.
 WARN  conflicting versions for project dependency "@types/jest":

- ^25.1.4 injected by generator "undefined"
- ^24.0.19 injected by generator "@vue/cli-plugin-typescript"

Using newer version (^25.1.4), but this may cause build errors.
 ERROR  SyntaxError: Unexpected token / in JSON at position 652
SyntaxError: Unexpected token / in JSON at position 652
    at JSON.parse (<anonymous>)
    at Object.read (/usr/local/lib/node_modules/@vue/cli/lib/util/configTransforms.js:44:30)
    at ConfigTransform.transform (/usr/local/lib/node_modules/@vue/cli/lib/ConfigTransform.js:25:30)
    at extract (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:198:37)
    at Generator.extractConfigFiles (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:211:9)
    at Generator.generate (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:173:10)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async runGenerator (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:109:3)
    at async invoke (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:90:3)

haoqunjiang · 2020-03-14T05:52:30Z

Sorry I misread the error messages.

The version mismatch only causes warnings not errors and will be fine after invocation. So either @vue/cli-plugin-eslint version should be fine.

The real problem here happens in the extraction of config files. Very likely on reading existing config files. One of package.json, .eslintrc, or .eslintrc.json may be a malformed JSON file.

haoqunjiang · 2020-03-14T05:58:05Z

On the other hand, it looks like you have configured eslint yourself before adding the @vue/cli-plugin-eslint.
So it may not be that necessary to invoke the generator.

npm install -D @vue/cli-plugin-eslint is enough for the basic usage. The vue-cli-service lint will automatically invoke eslint instead of tslint if it detects one.
What the plugin generator does underlyingly is simply making sure the parser/plugins are set up correctly. And you can do this manually yourself. For example, you can scaffold a new project with the required options, and then copy-paste the content of .eslintrc.js & the dependencies field (that are related to eslint) to the current project.

vegerot · 2020-03-15T18:34:26Z

@sodatea deleted all my .eslint* files, deleted all "lint" related packages from package.json, deleted node_modules folder, then installed npm install @vue/cli-plugin-eslint, vue invoke ESLint, etc. and it still doesn't work. Going to Vue CLI localhost:8000/configuration/org.vue.eslint just shows a page that loads forever

vue-cli-service lint cannot find eslint

haoqunjiang · 2020-03-16T05:27:01Z

Could you provide a reproduction? This is not a common error and I've no idea how it happened.

The error message says it's thrown from this line:

vue-cli/packages/@vue/cli-plugin-eslint/index.js

Line 20 in 8749f4b

eslint: eslintPkg.version

but how is it possible? It only reads from the package.json of the installed eslint package.

haoqunjiang · 2020-03-16T07:15:56Z

Plus, after "copy-paste the content of .eslintrc.js & the dependencies field (that are related to eslint) to the current project", please run npm install again to ensure the new dependencies are installed.

vegerot · 2020-03-16T15:00:34Z

I'm not quite sure what I did, but I played around with it for a while and eventually it worked 🤷‍♀️

haoqunjiang · 2020-03-16T15:52:21Z

Well, then I'm closing this issue for not being reproducible anymore…

vegerot · 2020-03-16T16:00:33Z

thanks for the help!

haoqunjiang added the bug label Mar 10, 2020

haoqunjiang removed the bug label Mar 16, 2020

haoqunjiang added the needs reproduction This issue is missing a minimal runnable reproduction, provided by the author label Mar 16, 2020

haoqunjiang closed this as completed Mar 16, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot install ESLint with `vue add eslint` through ui or cli #5256

Cannot install ESLint with `vue add eslint` through ui or cli #5256

vegerot commented Mar 10, 2020

haoqunjiang commented Mar 10, 2020

vegerot commented Mar 10, 2020

haoqunjiang commented Mar 10, 2020

vegerot commented Mar 13, 2020

vegerot commented Mar 13, 2020

haoqunjiang commented Mar 14, 2020 •

edited

Loading

haoqunjiang commented Mar 14, 2020

vegerot commented Mar 15, 2020

haoqunjiang commented Mar 16, 2020

haoqunjiang commented Mar 16, 2020

vegerot commented Mar 16, 2020

haoqunjiang commented Mar 16, 2020

vegerot commented Mar 16, 2020

Cannot install ESLint with vue add eslint through ui or cli #5256

Cannot install ESLint with vue add eslint through ui or cli #5256

Comments

vegerot commented Mar 10, 2020

Version

Environment info

Steps to reproduce

What is expected?

What is actually happening?

haoqunjiang commented Mar 10, 2020

vegerot commented Mar 10, 2020

haoqunjiang commented Mar 10, 2020

vegerot commented Mar 13, 2020

vegerot commented Mar 13, 2020

haoqunjiang commented Mar 14, 2020 • edited Loading

haoqunjiang commented Mar 14, 2020

vegerot commented Mar 15, 2020

haoqunjiang commented Mar 16, 2020

haoqunjiang commented Mar 16, 2020

vegerot commented Mar 16, 2020

haoqunjiang commented Mar 16, 2020

vegerot commented Mar 16, 2020

Cannot install ESLint with `vue add eslint` through ui or cli #5256

Cannot install ESLint with `vue add eslint` through ui or cli #5256

haoqunjiang commented Mar 14, 2020 •

edited

Loading