1

Tengo el siguiente contenido en el package.json

{
  "name": "@destacame/vuetiful-widgets",
  "main": "lib/index.js",
  "module": "lib/index.esm.js",
  "version": "0.1.0",
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build",
    "reinstall": "npm cache clean --force && rm -rf node_modules && rm -f package-lock.json && npm install"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "peerDependencies": {
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.19.1",
    "@rollup/plugin-commonjs": "^14.0.0",
    "@rollup/plugin-node-resolve": "^8.4.0",
    "@storybook/addon-essentials": "^7.0.2",
    "@storybook/addon-interactions": "^7.0.2",
    "@storybook/addon-links": "^7.0.2",
    "@storybook/blocks": "^7.0.2",
    "@storybook/testing-library": "^0.0.14-next.2",
    "@storybook/vue": "^7.0.2",
    "@types/jest": "^27.0.1",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-unit-jest": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/compiler-sfc": "^3.0.0-rc.5",
    "@vue/eslint-config-typescript": "^9.1.0",
    "@vue/test-utils": "^1.1.3",
    "@vue/vue2-jest": "^27.0.0-alpha.2",
    "babel-jest": "^27.0.6",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-sort-keys-fix": "^1.1.2",
    "eslint-plugin-storybook": "^0.6.11",
    "eslint-plugin-vue": "^8.0.3",
    "jest": "^27.0.5",
    "prettier": "^2.4.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rollup": "^2.23.1",
    "rollup-plugin-peer-deps-external": "^2.2.3",
    "rollup-plugin-typescript2": "^0.27.2",
    "rollup-plugin-vue": "^5.1.6",
    "storybook": "^7.0.2",
    "ts-jest": "^27.0.4",
    "sass": "^1.60.0",
    "sass-loader": "^13.2.2",
    "typescript": "~4.5.5",
    "vue-eslint-parser": "^9.1.1",
    "vue-loader": "^15.10.1",
    "@storybook/vue-webpack5": "^7.0.2",
    "vue-template-compiler": "^2.6.14"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "resolutions": {
    "webpack": "^5.0.0"
  },
  "jest": {
    "preset": "@vue/cli-plugin-unit-jest/presets/typescript-and-babel"
  }
}

Al ejecutar el comando reinstall este me arroja el siguiente error:

npm WARN using --force Recommended protections disabled.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^5.0.0" from [email protected]
npm ERR!   node_modules/css-loader
npm ERR!     peer css-loader@"*" from @storybook/[email protected]
npm ERR!     node_modules/@storybook/vue
npm ERR!       dev @storybook/vue@"^7.0.2" from the root project
npm ERR!       1 more (@storybook/vue-webpack5)
npm ERR!     peer css-loader@"*" from @storybook/[email protected]
npm ERR!     node_modules/@storybook/vue-webpack5
npm ERR!       dev @storybook/vue-webpack5@"^7.0.2" from the root project
npm ERR!     2 more (vue-loader, @vue/cli-service)
npm ERR!   peer webpack@">=5" from [email protected]
npm ERR!   node_modules/babel-loader
npm ERR!     peerOptional babel-loader@"^7.0.0 || ^8.0.0 || ^9.0.0" from @storybook/[email protected]
npm ERR!     node_modules/@storybook/vue
npm ERR!       dev @storybook/vue@"^7.0.2" from the root project
npm ERR!       1 more (@storybook/vue-webpack5)
npm ERR!     peer babel-loader@"^7.0.0 || ^8.0.0 || ^9.0.0" from @storybook/[email protected]
npm ERR!     node_modules/@storybook/vue-webpack5
npm ERR!       dev @storybook/vue-webpack5@"^7.0.2" from the root project
npm ERR!   4 more (vue-loader, @vue/cli-plugin-babel, @vue/cli-service, @vue/cli-plugin-eslint)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! dev @vue/cli-plugin-typescript@"~5.0.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^4.0.0" from [email protected]
npm ERR!   node_modules/cache-loader
npm ERR!     peerOptional cache-loader@"^4.1.0" from @vue/[email protected]
npm ERR!     node_modules/@vue/cli-plugin-typescript
npm ERR!       dev @vue/cli-plugin-typescript@"~5.0.0" 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.

Según entiendo esto se debe a que hay un conflicto de versiones de webpack. Consegui como sugerencia en un post agregando en el package.json lo siguiente

"resolutions": {
  "webpack": "^5.0.0"
},

Pero tampoco funcionó

Removí la dependencia "@vue/cli-plugin-typescript": "~5.0.0", del package.json y esto dejó instalar todos los paquetes, luego la instale manualmente con el siguiente comando:

npm install @vue/cli-plugin-typescript

Esto último si me funcionó

No encuentro como evitar este error.

3 respuestas 3

3
+250

Hay paquetes que necesitan una diferente versión de la misma dependencia, esto genera un conflicto, ya que podrían generar problemas. Recalco el "podrían", ya que la razón por la que no se instalan no es porque no sean compatibles, sino por seguridad.

Con este comando resuelves el conflicto

npm i --legacy-peer-deps

Lo que hace --legacy-peer-deps es permitir que se puedan instalar ambas versiones en tu proyecto.

Como alternativa

Podemos usar la propiedad "overrides" en el package.json

{
  "name": "@destacame/vuetiful-widgets",
  "main": "lib/index.js",
  "module": "lib/index.esm.js",
  "version": "0.1.0",
  "scripts": {...},
  "dependencies": {...},
  "devDependencies": {...},
  "overrides": { "webpack": "^5.0.0" }
}

Con esto todas las dependencias que necesitan webpack van a usar webpack 5, esto podría traer problemas de compatibilidad si es que utilizan alguna funcion que no esté disponible en X version.

7
  • ¿Que ventajas/desventajas da usar esta bandera? Si instalara 2 versiones a la vez ¿no estaria duplicando el peso de mi web?
    – bypabloc_
    el 9 abr. a las 18:31
  • 1
    Segun la documentación oficial no es recomdable usar esta bandera legacy-peer-deps
    – bypabloc_
    el 9 abr. a las 18:33
  • Si, entiendo que estariamos empaquetando 2 versiones distintas de la misma dependencia aumentando asi el tamaño del producto final. En vez de --legacy-peer-deps podrías usar la propiedad "overrides" en tu package.json Override nos permite especificar que versión de una dependencia vamos a instalar en caso de que haya algun conflicto. "overrides": { "webpack": "^5.0.0" } Con esto todas las dependencias que necesitan webpack van a usar webpack 5, esto podría traer problemas de compatibilidad si es que utilizan alguna funcion que no esté disponible en X version. Espero te ayude el 9 abr. a las 21:13
  • Actualicé la respuesta. el 9 abr. a las 21:23
  • Gracias, no sabia esa, lastimosamente lo intenté y me dió problemas con algunas funciones.
    – bypabloc_
    el 10 abr. a las 1:48
-1

El mensaje de error indica que hay un problema con las dependencias de webpack. Parece que se está utilizando una versión diferente de la que se necesita para una de las dependencias. Esto puede causar problemas al intentar reinstalar las dependencias.

Hay dos soluciones posibles: una es forzar la reinstalación de las dependencias con el comando "npm install --force", pero esto podría causar más problemas. La otra opción es utilizar el flag "--legacy-peer-deps" al momento de instalar las dependencias, lo que resolverá los conflictos de una manera más compatible con versiones antiguas de npm.

Prueba con este:

  "name": "@destacame/vuetiful-widgets",
  "version": "0.1.0",
  "main": "lib/index.js",
  "module": "lib/index.esm.js",
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build",
    "reinstall": "rm -rf node_modules && npm cache clean --force && rm -f package-lock.json && npm install"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "peerDependencies": {
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.19.1",
    "@rollup/plugin-commonjs": "^14.0.0",
    "@rollup/plugin-node-resolve": "^8.4.0",
    "@storybook/addon-essentials": "^7.0.2",
    "@storybook/addon-interactions": "^7.0.2",
    "@storybook/addon-links": "^7.0.2",
    "@storybook/blocks": "^7.0.2",
    "@storybook/testing-library": "^0.0.14-next.2",
    "@storybook/vue": "^7.0.2",
    "@types/jest": "^27.0.1",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-unit-jest": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/compiler-sfc": "^3.0.0-rc.5",
    "@vue/eslint-config-typescript": "^9.1.0",
    "@vue/test-utils": "^1.1.3",
    "@vue/vue2-jest": "^27.0.0-alpha.2",
    "babel-jest": "^27.0.6",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-sort-keys-fix": "^1.1.2",
    "eslint-plugin-storybook": "^0.6.11",
    "eslint-plugin-vue": "^8.0.3",
    "jest": "^27.0.5",
    "prettier": "^2.4.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rollup": "^2.23.1",
    "rollup-plugin-peer-deps-external": "^2.2.3",
    "rollup-plugin-typescript2": "^0.27.2",
    "rollup-plugin-vue": "^5.1.6",
    "sass": "^1.60.0",
    "sass-loader": "^13.2.2",
    "typescript": "~4.5.5",
    "vue-eslint-parser": "^9.1.1",
    "vue-loader": "^15.10.1",
    "@storybook/vue-webpack5": "^7.0.2",
    "vue-template-compiler": "^2.6.14"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "resolutions": {
    "webpack": "^5.0.0"
  },
  "jest": {
    "preset": "@vue/cli-plugin-unit-jest/presets/typescript-and-babel"
  }
}
2
  • Hola, te sugerimos revisar: CHATGPT está prohibido, saludos.
    – Jorgesys
    el 11 abr. a las 0:12
  • Soy de Venezuela, CHAT-GPT está fuera de mi alcance, pero si use useblackbox.io, la cual es algo similar, mis disculpas. Solo intentaba ayudar.
    – chipping
    el 11 abr. a las 1:02
-2

Erro de dependencias al usar reinstall Debe reinstalar o manual todas las dependencias o actualizarlas a la versión de webpack que esta usando:

Intente:

  • Elimine node_modules y package-lock.json.
  • Ejecute el comando npm cache clean --force
  • npm install
2
  • 1
    esa es la definición dada en el package.json -> "reinstall": "npm cache clean --force && rm -rf node_modules && rm -f package-lock.json && npm install" el 8 abr. a las 20:12
  • 3
    Revisar Cómo responder.
    – Jorgesys
    el 9 abr. a las 21:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.