migrator for cli-plugin-eslint crashes during 'vue upgrade' #5357

gregveres · 2020-04-06T14:16:28Z

Version

4.3.0

Environment info

 vue info   

Environment Info:

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7 CPU         930  @ 2.80GHz
  Binaries:
    Node: 12.14.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.12.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.1.2
    @vue/babel-preset-app:  4.3.0
    @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.3.0
    @vue/cli-plugin-babel: ~4.3.0 => 4.3.0
    @vue/cli-plugin-e2e-cypress: ~4.3.0 => 4.3.0
    @vue/cli-plugin-eslint: ~4.3.0 => 4.3.0
    @vue/cli-plugin-pwa: ~4.2.0 => 4.2.3
    @vue/cli-plugin-router: ~4.2.0 => 4.2.3 (4.3.0)
    @vue/cli-plugin-typescript: ~4.2.0 => 4.2.3
    @vue/cli-plugin-unit-jest: ~4.2.0 => 4.2.3
    @vue/cli-plugin-vuex: ~4.2.0 => 4.2.3 (4.3.0)
    @vue/cli-service: ~4.3.0 => 4.3.0
    @vue/cli-shared-utils:  4.3.0 (4.2.3)
    @vue/component-compiler-utils:  3.1.1
    @vue/composition-api: 0.5.0 => 0.5.0
    @vue/eslint-config-prettier: 6.0.0 => 6.0.0
    @vue/eslint-config-typescript: 5.0.1 => 5.0.1
    @vue/preload-webpack-plugin:  1.1.1
    @vue/test-utils: 1.0.0-beta.32 => 1.0.0-beta.32
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: 6.1.2 => 6.1.2
    jest-serializer-vue:  2.0.2
    typescript: ~3.7.5 => 3.7.5
    vue: 2.6.11 => 2.6.11
    vue-cli-plugin-i18n: ~0.6.1 => 0.6.1
    vue-cli-plugin-vuetify: ~2.0.5 => 2.0.5
    vue-eslint-parser:  7.0.0
    vue-hot-reload-api:  2.3.4
    vue-i18n: 8.15.5 => 8.15.5 (8.15.6)
    vue-i18n-extract:  1.0.3
    vue-i18n-ts:  0.1.0
    vue-jest:  3.0.5
    vue-loader:  15.9.1
    vue-router: 3.1.5 => 3.1.5
    vue-style-loader:  4.1.2
    vue-template-compiler: 2.6.11 => 2.6.11
    vue-template-es2015-compiler:  1.9.1
    vue-test-utils: 1.0.0-beta.11 => 1.0.0-beta.11
    vuetify: 2.2.20 => 2.2.20
    vuetify-loader: 1.3.0 => 1.3.0
  npmGlobalPackages:
    @vue/cli: Not Found

the npm global package says not found because I am using yarn. 
yarn global list --pattern cli     
yarn global v1.22.4
info "@quasar/[email protected]" has binaries:
   - quasar
info "@vue/[email protected]" has binaries:
   - vue
info "[email protected]" has binaries:
   - cloc
info "[email protected]" has binaries:
   - majestic
Done in 2.01s.

Steps to reproduce

On my project, I did the following:

yarn global upgrade @vue/cli

this gave me 4.3.0 (from 4.2.3)
then I ran the upgrade like the docs said to do:

vue upgrade

this cranked along for a while running all the upgrades and then the migrations and crashed on the cli-plugin-eslint migration.

I use separate config files.

What is expected?

I expected the upgrade to run without errors.

What is actually happening?

everything was humming along until

�🚀  Running migrator of @vue/cli-plugin-eslint
 ERROR  TypeError: Invalid Version: null
TypeError: Invalid Version: null
    at new SemVer (C:\Users\gregv\source\repos\SquashSpider\SquashSpider\SkyCourt.UI\ui\node_modules\@vue\cli-shared-utils\node_modules\semver\semver.js:314:11)
    at Function.major (C:\Users\gregv\source\repos\SquashSpider\SquashSpider\SkyCourt.UI\ui\node_modules\@vue\cli-shared-utils\node_modules\semver\semver.js:632:10)
    at Object.module.exports [as apply] (C:\Users\gregv\source\repos\SquashSpider\SquashSpider\SkyCourt.UI\ui\node_modules\@vue\cli-plugin-eslint\migrator\index.js:23:35)
    at Migrator.generate (C:\Users\gregv\AppData\Local\Yarn\Data\global\node_modules\@vue\cli\lib\Migrator.js:37:18)
    at runMigrator (C:\Users\gregv\AppData\Local\Yarn\Data\global\node_modules\@vue\cli\lib\migrate.js:32:18)
    at processTicksAndRejections (internal/process/task_queues.js:94:5)
    at async Upgrader.upgrade (C:\Users\gregv\AppData\Local\Yarn\Data\global\node_modules\@vue\cli\lib\Upgrader.js:124:5)
    at async Upgrader.upgradeAll (C:\Users\gregv\AppData\Local\Yarn\Data\global\node_modules\@vue\cli\lib\Upgrader.js:49:7)
PS C:\Users\gregv\source\repos\SquashSpider\SquashSpider\SkyCourt.UI\ui>

I guess I also hoped that it would continue to run the other migrations that might be needed even though one of them in the chain crashed. At this point, I don't know what other migrations didn't get run.

the contents of my .eslintrc.js file:

module.exports = {
  root: true,

  env: {
    node: true
  },

  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint'
  ],

  parserOptions: {
    ecmaVersion: 2020
  },

  rules: {
    'no-console': 'off',
    'no-debugger': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/no-namespace': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    'eslint/no-empty': 'off',
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true,
        semi: true,
        trailingComma: 'none'
      }
    ]
  },

  overrides: [
    {
      files: ['**/*.unit.ts'],
      env: {
        jest: true
      },
    }
  ],

  extends: [
    'plugin:vue/strongly-recommended',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint'
  ]
};

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

haoqunjiang · 2020-04-06T15:05:37Z

What's the eslint version range in your project? I presumed it to be a caret range when writing the migrator (such as ^6.7.2). If that's not the case it may throw.

gregveres · 2020-04-06T19:53:40Z

Actually, I had changed them all to exact values a while ago. I had previously realized that if we don't lock them down, then our build system can be building a production build with versions that we haven't tested with.

from our package.json file

 "devDependencies": {
    "@types/jest": "24.0.19",
    "@types/lodash": "4.14.149",
    "@types/webpack": "4.4.0",
    "@typescript-eslint/eslint-plugin": "2.18.0",
    "@typescript-eslint/parser": "2.18.0",
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-plugin-e2e-cypress": "~4.3.0",
    "@vue/cli-plugin-eslint": "~4.3.0",
    "@vue/cli-plugin-pwa": "~4.2.0",
    "@vue/cli-plugin-router": "~4.2.0",
    "@vue/cli-plugin-typescript": "~4.2.0",
    "@vue/cli-plugin-unit-jest": "~4.2.0",
    "@vue/cli-plugin-vuex": "~4.2.0",
    "@vue/cli-service": "~4.3.0",
    "@vue/eslint-config-prettier": "6.0.0",
    "@vue/eslint-config-typescript": "5.0.1",
    "@vue/test-utils": "1.0.0-beta.32",
    "babel-plugin-transform-decorators": "6.24.1",
    "csstype": "2.6.9",
    "eslint": "6.7.2",
    "eslint-plugin-prettier": "3.1.1",
    "eslint-plugin-vue": "6.1.2",
    "node-sass": "4.12.0",
    "prettier": "1.19.1",
    "sass": "^1.19.0",
    "sass-loader": "8.0.2",
    "typescript": "~3.7.5",
    "vue-cli-plugin-i18n": "~0.6.1",
    "vue-cli-plugin-vuetify": "~2.0.5",
    "vue-template-compiler": "2.6.11",
    "vue-test-utils": "1.0.0-beta.11",
    "vuetify-loader": "^1.3.0"
  }

I think the upgrade process inserted the ~. And all of this started because vuetify decided to stop building after upgrading cypress to 4.x so I reinstalled vuetify after the vue upgrade to get it working again, that's why it is using ^.

LinusBorg · 2020-04-06T20:06:46Z

I had previously realized that if we don't lock them down, then our build system can be building a production build with versions that we haven't tested with.

Isn't that what lock files already protect you from ?

gregveres · 2020-04-06T20:21:34Z

@LinusBorg Ah, you are correct. That article I ready a year ago led me astray! I will go add back the range indicators into our package.json file. Thanks for pointing that out.

LinusBorg · 2020-04-06T20:28:16Z

We'll fix this nonerheless, but going back to versions with a caret should solve your issue

gregveres · 2020-04-06T20:30:07Z

@LinusBorg so am I able to just run vue upgrade again and it will do the right thing?

gregveres · 2020-04-07T00:06:19Z

I re-ran vue upgrade and there were packages that still needed to upgrade. I assume that is because the process crashed while migrating. I changed my package.json file to use "~" for all version numbers before I re-ran the command.

I then realized that it didn't re-run eslint because it had already done the update. It just didn't do the migration. So I rolled back eslint and all the related packages and tried it again. This time it indicated that eslint was the only package that needed updating:

✔  Gathering package information...
  Name                    Installed       Wanted          Latest          Command to upgrade
  @vue/cli-plugin-eslint  4.2.0           4.2.0           4.3.0           vue upgrade @vue/cli-plugin-eslint

I did the install and it crashed during the migration again. It also didn't upgrade the package 'eslint'. I had version 6.7.2 installed and afterwards it was still on that version. It did update the plugin to 4.3.0.

The crash was:

�🚀  Running migrator of @vue/cli-plugin-eslint
 ERROR  TypeError: Invalid Version: null
TypeError: Invalid Version: null
    at new SemVer (C:\Users\gregv\source\repos\SquashSpider\SquashSpider\SkyCourt.UI\ui\node_modules\@vue\cli-shared-utils\node_modules\semver\semver.js:314:11)
    at Function.major (C:\Users\gregv\source\repos\SquashSpider\SquashSpider\SkyCourt.UI\ui\node_modules\@vue\cli-shared-utils\node_modules\semver\semver.js:632:10)
    at Object.module.exports [as apply] (C:\Users\gregv\source\repos\SquashSpider\SquashSpider\SkyCourt.UI\ui\node_modules\@vue\cli-plugin-eslint\migrator\index.js:23:35)
    at Migrator.generate (C:\Users\gregv\AppData\Local\Yarn\Data\global\node_modules\@vue\cli\lib\Migrator.js:37:18)
    at runMigrator (C:\Users\gregv\AppData\Local\Yarn\Data\global\node_modules\@vue\cli\lib\migrate.js:32:18)
    at processTicksAndRejections (internal/process/task_queues.js:94:5)
    at async Upgrader.upgrade (C:\Users\gregv\AppData\Local\Yarn\Data\global\node_modules\@vue\cli\lib\Upgrader.js:124:5)
    at async Upgrader.upgradeAll (C:\Users\gregv\AppData\Local\Yarn\Data\global\node_modules\@vue\cli\lib\Upgrader.js:49:7)

I am trying to debug it now.

gregveres · 2020-04-07T00:22:38Z

I was hoping I could put some console.log statements into the code but they disappeared so I am assuming that the files pointed to in the crash output above are overwritten during the process.
It seems like semver.Range is throwing an error and then semver.maxSatisfying is silently turning that into a null, eating the real error and causing a null exception later in the code.

but since I can't get some logs in there, I can't tell why Range's this.set is empty. Clearly the split of index.js's localESLintRange returned no entries.

Ah, I see that localESLintRange is coming directly from my package.json.

I see from the code that the migration doesn't have to run in my case. I was already on ESLint 6 so the migration just bails. but that doesn't help you guys track down why it is crashing.

This crashed on my setup when my eslint line in package.json was:

    "eslint": "~6.8.0",

gregveres · 2020-04-07T00:34:56Z

I am continuing to look into eslint further because after the upgrade, compiling my code, with yarn run serve, kicks out a lot of linting errors (formatting issues like spaces) that weren't there before. Those errors aren't showing up in VSCode because I think I am using prettier for formatting.

I noticed that if I didn't have any eslint installed, the migration would have installed eslint, babel-eslint and eslint-plugin-vue.

I have eslint and eslint-plugin-vue installed, but I don't have babel-eslint. Do you know if that is needed?

This project was created about a month ago with vue cli 3.

closes #5357

LinusBorg · 2020-04-07T13:49:23Z

babel-eslint might be needed if you want to parse modern JS features that the default eslint parser doesn't understand.

haoqunjiang added a commit that referenced this issue Apr 7, 2020

fix(eslint-migrator): fix local eslint major version detection

ee7c9ed

closes #5357

haoqunjiang mentioned this issue Apr 7, 2020

fix(eslint-migrator): fix local eslint major version detection #5363

Merged

9 tasks

haoqunjiang closed this as completed in #5363 Apr 7, 2020

haoqunjiang added a commit that referenced this issue Apr 7, 2020

fix(eslint-migrator): fix local eslint major version detection (#5363)

30b6873

closes #5357

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

migrator for cli-plugin-eslint crashes during 'vue upgrade' #5357

migrator for cli-plugin-eslint crashes during 'vue upgrade' #5357

gregveres commented Apr 6, 2020

haoqunjiang commented Apr 6, 2020

gregveres commented Apr 6, 2020

LinusBorg commented Apr 6, 2020

gregveres commented Apr 6, 2020

LinusBorg commented Apr 6, 2020

gregveres commented Apr 6, 2020

gregveres commented Apr 7, 2020

gregveres commented Apr 7, 2020

gregveres commented Apr 7, 2020

LinusBorg commented Apr 7, 2020

migrator for cli-plugin-eslint crashes during 'vue upgrade' #5357

migrator for cli-plugin-eslint crashes during 'vue upgrade' #5357

Comments

gregveres commented Apr 6, 2020

Version

Environment info

Steps to reproduce

yarn global upgrade @vue/cli

vue upgrade

What is expected?

What is actually happening?

haoqunjiang commented Apr 6, 2020

gregveres commented Apr 6, 2020

LinusBorg commented Apr 6, 2020

gregveres commented Apr 6, 2020

LinusBorg commented Apr 6, 2020

gregveres commented Apr 6, 2020

gregveres commented Apr 7, 2020

gregveres commented Apr 7, 2020

gregveres commented Apr 7, 2020

LinusBorg commented Apr 7, 2020