Estoy desarrollando una aplicación Drawflow usando Vuejs/Nuxtjs basada en el código mencionado aquí . Cuando instalo el paquete element-plus e inicio la aplicación, aparece el error:
Vue packages version mismatch: - vue@3.2.22 - vue-server-renderer@2.6.14Si elimino ese paquete, entonces todo funciona bien.
Intenté seguir las cosas según los comentarios mencionados en varias respuestas:
node_modules y package-lock.json e instálelos nuevamente con npm install .npm audit fix --forcenpm updatePero nada funcionó para mí. ¿Puede alguien decirme qué debo hacer para no recibir este error y hacer que todo funcione correctamente?
Error completo desde la 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. El siguiente es mi archivo package.json completo:
{ "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" } }Element+ es una biblioteca de interfaz de usuario de Vue3 , por lo que no es compatible con Nuxt2 (usando Vue2). De ahí el motivo por el que recibe el error: no es retrocompatible con Vue2.
Mientras tanto, Element es totalmente compatible con Vue2 y puede ser lo suficientemente bueno.
¿Necesitas usar exactamente este por cierto? Hay muchas opciones cuando se trata de marcos CSS compatibles con Vue2 y Vue3. No todos lo son, pero la mayoría sí.