3

I am developing a Drawflow application using Vuejs/Nuxtjs based on the code mentioned here. When I install the package element-plus and start the application then I get the error:

Vue packages version mismatch:

- vue@3.2.22
- vue-server-renderer@2.6.14

If I remove that package then everything works fine.

I tried following things based on comments mentioned in various answers:

  1. Remove node_modules and package-lock.json and install again with npm install.
  2. Run the npm audit fix --force
  3. Run the npm update

But nothing worked for me. Can someone please let me know what do I need to do so that I don't get this error and make everything work properly?

Complete error from terminal:

Vue packages version mismatch:

- vue@3.2.22
- vue-server-renderer@2.6.14

This may cause things to work incorrectly. Make sure to use the same version for both.


  
  Vue packages version mismatch:
  
  - vue@3.2.22
  - vue-server-renderer@2.6.14
  
  This may cause things to work incorrectly. Make sure to use the same version for both.
  
  at Object.<anonymous> (node_modules/vue-server-renderer/index.js:8:9)
  at Module.o._compile (node_modules/jiti/dist/v8cache.js:2:2778)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
  at Module.load (internal/modules/cjs/loader.js:928:32)
  at Function.Module._load (internal/modules/cjs/loader.js:769:14)
  at Module.require (internal/modules/cjs/loader.js:952:19)
  at n (node_modules/jiti/dist/v8cache.js:2:2472)
  at Object.<anonymous> (node_modules/@nuxt/vue-renderer/dist/vue-renderer.js:19:27)
  at Module.o._compile (node_modules/jiti/dist/v8cache.js:2:2778)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)


   ╭────────────────────────────────────────────────────────────────────────────────────────────╮
   │                                                                                            │
   │   ✖ Nuxt Fatal Error                                                                       │
   │                                                                                            │
   │   Error:                                                                                   │
   │                                                                                            │
   │   Vue packages version mismatch:                                                           │
   │                                                                                            │
   │   - vue@3.2.22                                                                             │
   │   - vue-server-renderer@2.6.14                                                             │
   │                                                                                            │
   │   This may cause things to work incorrectly. Make sure to use the same version for both.

Following is my complete package.json file:

{
  "name": "my-project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "npm run lint:js"
  },
  "dependencies": {
    "@element-plus/icons": "^0.0.11",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/dotenv": "^1.4.1",
    "bootstrap": "^4.6.0",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.15.1",
    "drawflow": "^0.0.52",
    "element-plus": "^1.2.0-beta.3",
    "nuxt": "^2.15.8",
    "url-loader": "^4.1.1",
    "vue-multiselect": "^2.1.6"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.14.7",
    "@nuxtjs/eslint-config": "^6.0.1",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@types/drawflow": "^0.0.3",
    "eslint": "^7.29.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-vue": "^7.12.1"
  }
}
kissu
  • 40,416
  • 14
  • 65
  • 133
BATMAN_2008
  • 2,788
  • 3
  • 31
  • 98
  • Those errors probably mean that you do have an incompatibility of the package required by the NPM package you're trying to install and the version used by Nuxt. There is maybe something that is **only** available with Vue3? (I'm thinking about something like HeadlessUI for example) It is not a package manager issue so far, but really a compatibility issues between the versions of the packages you're using. – kissu Nov 21 '21 at 13:59
  • @kissu Thanks a lot for your response. Yes, this definitely seems like the issue with package versions. Is there a way around for me with this issue? Because I am really stuck at this point. Looking forward to your suggestions. – BATMAN_2008 Nov 21 '21 at 17:04
  • You had a working project before, right? Try to make a diff or to read what the stacktrace is giving you. There is probably a mention of the miss-matching package at some point. – kissu Nov 21 '21 at 17:08
  • If I just install the package `npm install element-plus --save` and start the project using `npm run dev` then I am getting the error mentioned in the question. Without even using it I am getting the error. If I remove this package then everything works fine. I have added the complete `error` response that I am getting in my terminal. – BATMAN_2008 Nov 21 '21 at 17:16

1 Answers1

2

Element+ is a Vue3 UI library, so it is indeed not compatible with Nuxt2 (using Vue2). Hence why you're getting the error: it is not retro-compatible with Vue2.

Meanwhile, Element is totally compatible with Vue2 and may be a good-enough fit.

Do you need to use exactly this one btw? There is a lot of choices when it comes down to CSS frameworks compatible with both Vue2 and Vue3. Not all of them are, but most do.

kissu
  • 40,416
  • 14
  • 65
  • 133