Vue 3 Dependecies issue

[richardshergold]

Current behavior

Trying to install but getting a dependency error and I'm not exactly sure what I need to do?

~/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/webpack-dev-server@1.7.0
npm ERR! node_modules/@cypress/webpack-dev-server
npm ERR!   peerOptional @cypress/webpack-dev-server@"*" from @cypress/vue@3.0.5
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.

Debug logs

No response

Cypress Version

@cypress/vue@next

Package Manager

npm

Operating system

Mac

Other

No response

[lmiller1990]

What does the project look like (eg, are you adding this to a vue-cli project etc)? I just ran the command as-is in a fresh project with an empty package.json and it works fine. Can you provide your package.json perhaps?

[richardshergold]

I've tried --force and that installs ok but I've not had time to go any further yet. Here's my package.json:

{
  "name": "myProject",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve src/mainDev.ts",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@cypress/vue": "^3.0.5",
    "axios": "^0.21.1",
    "core-js": "^3.19.0",
    "dayjs": "^1.10.7",
    "primeflex": "^3.1.0",
    "primeicons": "^4.1.0",
    "primevue": "^3.8.2",
    "vue": "^3.2.21",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.0.12",
    "vuex": "^4.0.0",
    "vuex-persistedstate": "^4.0.0-beta.3"
  },
  "devDependencies": {
    "@types/jest": "^24.9.1",
    "@typescript-eslint/eslint-plugin": "^4.4.3",
    "@typescript-eslint/parser": "^4.4.3",
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-eslint": "~4.5.15",
    "@vue/cli-plugin-router": "~4.5.15",
    "@vue/cli-plugin-typescript": "~4.5.15",
    "@vue/cli-plugin-unit-jest": "~4.5.15",
    "@vue/cli-plugin-vuex": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.4.1",
    "eslint-plugin-vue": "^7.20.0",
    "flush-promises": "^1.0.2",
    "prettier": "^2.4.0",
    "sass": "^1.43.4",
    "sass-loader": "^10.1.1",
    "typescript": "^4.4.4",
    "vue-jest": "^5.0.0-0",
    "webpack": "^4.46.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "jest": {
    "moduleFileExtensions": [
      "js",
      "ts",
      "json",
      "vue"
    ],
    "globals": {
      "vue-jest": {
        "hideStyleWarn": true
      }
    },
    "preset": "@vue/cli-plugin-unit-jest",
    "testMatch": [
      "**/src/**/*.spec.[jt]s?(x)"
    ],
    "transform": {
      "^.+\\.vue$": "vue-jest"
    },
    "transformIgnorePatterns": [
      "<rootDir>/node_modules/(?!primevue/.*)"
    ]
  }
}

[richardshergold]

the --force option seems to have worked - I now have the cypress.io component test runner running ok

[lmiller1990]

Thanks, good to know. That package.json will help in debugging this.

Glad you got it working. Let me know if you encounter any other problems.

[chrisbreiding]

Closing this as it seems to be resolved.