Vue-cli: Vue create broken when selecting cypress for E2E testing

[assembledadam]

Version

3.0.4

Reproduction link

https://github.com/vuejs/vue-cli/tree/v3.0.4

Node and OS info

Node v10.11.0 / Tested on MacOS High Sierra 10.13.6 and Debian Jessie (Docker node:latest)

Steps to reproduce

Run $ vue create hello-world

With the following settings:
Vue CLI v3.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files

What is expected?

Successful installation

What is actually happening?

⠋  Running completion hooks...error: '@cypress/webpack-preprocessor' should be listed in the project's dependencies. Run 'npm i -S @cypress/webpack-preprocessor' to add it (import/no-extraneous-dependencies) at claimer-app/tests/e2e/plugins/index.js:2:17:
  1 | // https://docs.cypress.io/guides/guides/plugins-guide.html
> 2 | const webpack = require('@cypress/webpack-preprocessor');
    |                 ^
  3 | 
  4 | module.exports = (on, config) => {
  5 |   on('file:preprocessor', webpack({


error: Unexpected require() (global-require) at claimer-app/tests/e2e/plugins/index.js:6:21:
  4 | module.exports = (on, config) => {
  5 |   on('file:preprocessor', webpack({
> 6 |     webpackOptions: require('@vue/cli-service/webpack.config'),
    |                     ^
  7 |     watchOptions: {},
  8 |   }));
  9 | 


error: '@vue/cli-service' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies) at claimer-app/tests/e2e/plugins/index.js:6:21:
  4 | module.exports = (on, config) => {
  5 |   on('file:preprocessor', webpack({
> 6 |     webpackOptions: require('@vue/cli-service/webpack.config'),
    |                     ^
  7 |     watchOptions: {},
  8 |   }));
  9 | 


3 errors found.

[LinusBorg]

Hm, those are eslint errors.

It seems that the way that this file is written breaks a few rules fo the airbnb preset (personal sidenote: much too strict, don't like this preset at all for a boilerplate like ours). The problem was introduced with commit bd32daa2db44bc50a6bc14d9887b9debd05a727b

https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-e2e-cypress/generator/template/tests/e2e/plugins/index.js

We could disable these rules for the file

/* eslint-disable import/no-extraneous-dependencies global-require */

We could also try and conform this file to the rules, but while that would be easy for the global-require error, it would require to adjust a few rules of eslint-plugin-import with globs to not match for certain files or other non-trivial re-configuration.

We would have to do something like this:

"import/no-extraneous-dependencies": [
  "error", 
  {
    "devDependencies": ["**/*.test.js", "**/*.spec.js"], // glob is taken from plugin docs, probably not what we need
    "peerDependencies": ["**/*.test.js", "**/*.spec.js"],
    "optionalDependencies": ["**/*.test.js", "**/*.spec.js"]
  }
]

or include the dirs of all possible @vue/ plugins as locations fore package.json files to look for dependencies:

"import/no-extraneous-dependencies": [
  "error", 
  {
    "packageDir": [
      './node_modules/@vue/cli-plugin-e2e-cypress',
      './node_modules/@vue/cli-plugin-e2e-nightwatch',
      './node_modules/@vue/cli-plugin-unit-mocha',
      './node_modules/@vue/cli-plugin-unit-jest',
      './node_modules/@vue/cli-service',
      // ...
    ]
  }

]

Which I would consider pretty verbose and confusing to newcomers.

Thoughts?

[assembledadam]

Gotcha.

Messing with things to conform when lint presets are transient and subject to change = waste of life. IMO disable rules for the file.

[macdaddyaz]

I'm still getting these errors with Vue CLI 3.0.5. My selected options look like they were identical to @assembledadam, except for using Jest instead of Mocha.

Vue CLI v3.0.5
? Please pick a preset: Babel full (vue-router, vuex, sass, babel, pwa, eslint, unit-jest, e2e-cypress)


Vue CLI v3.0.5
✨  Creating project in /Users/emcintyre/Development/src/sandbox/new-vue.
⚙  Installing CLI plugins. This might take a while...

yarn install v1.10.1
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
✨  Done in 121.03s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.10.1
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
✨  Done in 12.78s.
⠋  Running completion hooks...error: '@cypress/webpack-preprocessor' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies) at new-vue/tests/e2e/plugins/index.js:3:17:
  1 | // https://docs.cypress.io/guides/guides/plugins-guide.html
  2 | /* eslint-disable import/no-extraneous-dependencies global-require */
> 3 | const webpack = require('@cypress/webpack-preprocessor');
    |                 ^
  4 |
  5 | module.exports = (on, config) => {
  6 |   on('file:preprocessor', webpack({


error: Unexpected require() (global-require) at new-vue/tests/e2e/plugins/index.js:7:21:
   5 | module.exports = (on, config) => {
   6 |   on('file:preprocessor', webpack({
>  7 |     webpackOptions: require('@vue/cli-service/webpack.config'),
     |                     ^
   8 |     watchOptions: {},
   9 |   }));
  10 |


error: '@vue/cli-service' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies) at new-vue/tests/e2e/plugins/index.js:7:21:
   5 | module.exports = (on, config) => {
   6 |   on('file:preprocessor', webpack({
>  7 |     webpackOptions: require('@vue/cli-service/webpack.config'),
     |                     ^
   8 |     watchOptions: {},
   9 |   }));
  10 |


3 errors found.

[sodatea]

@macdaddyaz
It is caused by a missing comma in the generated file (will be fixed in the next release). Please manually add that comma to your file: https://github.com/vuejs/vue-cli/commit/4e90afe18980f0f288908a7f7ef0974dc5a4545f#diff-1c4d741ece51a603d9d28f55c9d1e306