applyESLint is not a function error when adding eslint plugin

[yongwee]

Version

4.1.2

Environment info

System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
  Browsers:
    Chrome: 79.0.3945.88
    Firefox: Not Found
    Safari: 13.0.4
  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.1.2
    @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.1.2
    @vue/cli-plugin-babel: ^4.1.0 => 4.1.2
    @vue/cli-plugin-eslint: ^4.1.2 => 4.1.2
    @vue/cli-plugin-router:  4.1.2
    @vue/cli-plugin-unit-jest: ^4.1.0 => 4.1.2
    @vue/cli-plugin-vuex:  4.1.2
    @vue/cli-service: ^4.1.0 => 4.1.2
    @vue/cli-shared-utils:  4.1.2
    @vue/component-compiler-utils:  3.1.0
    @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
    jest-serializer-vue:  2.0.2
    vue: ^2.6.10 => 2.6.11
    vue-hot-reload-api:  2.3.4
    vue-jest:  3.0.5
    vue-loader:  15.8.3
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.10 => 2.6.11
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: 4.1.2

Steps to reproduce

1. Scaffold a project with unit testing, but without linter/formatter
2. Select Jest for unit testing
3. Finish project creation, move in project directory
4. Run vue add eslint and then select prettier

What is expected?

Step should succeed without issue, eslint plugin added into project.

What is actually happening?

The following error will appear:

TypeError: require(...).applyESLint is not a function
TypeError: require(...).applyESLint is not a function
    at module.exports (/Users/meowwoof/code/tester/node_modules/@vue/cli-plugin-eslint/generator/index.js:101:54)
    at Generator.initPlugins (/Users/meowwoof/.nvm/versions/node/v10.15.3/lib/node_modules/@vue/cli/lib/Generator.js:150:13)
    at process._tickCallback (internal/process/next_tick.js:68:7)

---

Was trying to add eslint into a scaffolded project when I ran into this bug.

Apparently applyESLint function was removed in this particular change:
2e1e92b#diff-29994942bb568c5548a12d8103751233L144-L150

but is still expected by by eslint plugin while in the process of being added into the project when it detects the jest plugin:

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

Line 104 in 2e1e92b

require('@vue/cli-plugin-unit-jest/generator').applyESLint(api)

Additional note: If the project was scaffolded with both eslint and jest selected at the time of creation, everything is ok. Problem only surfaces if eslint is added after project has been scaffolded with Jest.

[yongwee]

For those who might have gotten stuck at the same issue, a workaround is simply to remove @vue/cli-plugin-unit-jest (e.g. yarn remove @vue/cli-plugin-unit-jest), install eslint@^5 manually first and then run vue add eslint.

Once that's done, you can safely add jest back again (vue add unit-jest)