Cypress component testing Vue 3

[1beb]

When attempting to install the dependencies as described in the related blogpost I was unable to install the dependencies:

I tried this with an existing project and also a brand new Vue 3 project with nothing else with a factory fresh install of vue cli:

$ sudo npm install -g @vue/cli
...
$ vue create test-project
$ cd test-project
$ npm install @cypress/vue@next --dev
npm WARN install Usage of the `--dev` option is deprecated. Use `--include=dev` instead.
npm ERR! code ERESOLVE
npm ERR! Cannot destructure property 'name' of 'node' as it is null.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/user/.npm/_logs/2021-05-27T21_29_21_247Z-debug.log

Note: I have 3 colleagues, 2 of which are on Ubuntu and expeienced the same error. One of which is Windows and did not experience the error.

Windows user with success npm version 6.14.11
Ubuntu users with failure npm version 7.7.6

[lmiller1990]

I tried this on Mac OS and it's working as expected for me. 🤔

[lmiller1990]

We have had many issues around html-webpack-plugin.

Ref: #16108
Ref: #16388

Basically [email protected] is two major versions behind. Users need to be on 4.x (for webpack 4) or 5.x (for webpack 5). Having html-webpack-plugin@3 installed actually breaks @cypress/webpack-dev-server. We actually remove several webpack plugins that cause problems, see here. We then require the user either bring html-webpack-plugin 4.x or 5.x - basically, we do not support 3.x, since it's so out of date. Many projects are still using 3.x, but likely can be updated - both CRA and Vue CLI are on 4.x or 5.x now, for Webpack 4.x and 5.x respectively.

It looks like @vue/cli-service is now using [email protected]: https://github.com/vuejs/vue-cli/blob/c1bf3d874692637648a5cee39c8ea27126272d35/packages/%40vue/cli-service/package.json#L60. It also moved to 4.x around 9 months ago: https://github.com/vuejs/vue-cli/blame/f9d53c75d0e6c8a0cc1ff4ab7a0634e9c6fdce06/packages/@vue/cli-service/package.json#L59

@1beb are you able to try updating your Vue CLI dependencies? That might solve your problem.

[1beb]

HI @lmiller1990, I'm going to be working on this again this week. Apologies for the hiatus. I will update to let you know if this resolved the issue.

[richardshergold]

I'm getting this error now trying to install in my Vue 3 project - is there a solution? I'm getting:

~/projects/my-project [cypress] > npm install @cypress/vue@next --include=dev
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @cypress/vue@"3.0.5" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @cypress/[email protected]
npm ERR! node_modules/@cypress/webpack-dev-server
npm ERR!   peerOptional @cypress/webpack-dev-server@"*" from @cypress/[email protected]
npm ERR!   node_modules/@cypress/vue
npm ERR!     @cypress/vue@"3.0.5" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

[lmiller1990]

Stupid question: what if you do --force like it says? Not ideal, but good to know if that will let you proceed and use Cypress with Vue 3.

What npm version are you on? Looks like we need to look into our dependencies again and make sure everything is correct.

[richardshergold]

Not a stupid question! I've not tried --force yet. I will try it later and report back (diverted onto something else right now)

npm is 7.17.0

(I did create a separate issue #19106)