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

[gregveres]

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/cli@1.0.5" has binaries:
   - quasar
info "@vue/cli@4.3.0" has binaries:
   - vue
info "cloc@2.5.1" has binaries:
   - cloc
info "majestic@1.6.2" 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'
  ]
};

[haoqunjiang]

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]

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]

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]

@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]

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

[gregveres]

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

[gregveres]

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]

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]

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.

[LinusBorg]

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