How to solve vue 3 compatible packages problem? - node.js

I'm trying to update my packages with npm.
I want to use vue 3 but there are some problems in these 3 packages:
#vue/composition-api
vue-class-component
vue-property-decorator
I cannot install them.
For example this is the error output for vue-property-decorator:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: front#1.0.0
npm ERR! Found: vue#3.2.37
npm ERR! node_modules/vue
npm ERR! vue#"^3.2.37" from the root project
npm ERR! peer vue#"*" from vue-property-decorator#9.1.2
npm ERR! node_modules/vue-property-decorator
npm ERR! vue-property-decorator#"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue#"^2.0.0" from vue-class-component#7.2.6
npm ERR! node_modules/vue-class-component
npm ERR! peer vue-class-component#"*" from vue-property-decorator#9.1.2
npm ERR! node_modules/vue-property-decorator
npm ERR! vue-property-decorator#"*" 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.
npm ERR!
npm ERR! See /Users/ed/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/ed/.npm/_logs/2022-07-13T10_36_11_427Z-debug-0.log
How can I use these packages with vue 3?

vue-property-decorator fully depends on vue-class-components (source: readme), but vue-class-components has not been updated in the last 2 years.
I can't seem to find any post about a Vue 3 version, so I think it's just made for Vue 2. Your log says:
peer vue#"^2.0.0" from vue-class-component#7.2.6
It's looking for the verision 2 of Vue, not the 3.
For #vue/composition-api, it's now an official API in Vue 3, why would you like to install the backport of Vue 2 in the Vue 3 version?

Related

I cannot install dayjs library on new angular app

I'm new to angular and I'm currently making some tutorials and I ran onto some dependency tree issue when I try to install dayjs library. I looked for an answer and I assume that the library should be updated.
I run the following command :
npm install --save angular-dayjs dayjs
and the result I got is
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: test-app#0.0.0
npm ERR! Found: #angular/common#13.1.3
npm ERR! node_modules/#angular/common
npm ERR! #angular/common#"~13.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer #angular/common#"^11.2.7" from angular-dayjs#0.0.4
npm ERR! node_modules/angular-dayjs
npm ERR! angular-dayjs#"*" 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.
I assume that the author of the library should rebuild the it against latest angular/common but
is there any chance to solve this issue on my own?
Thank you in advance!

npm run dev not working with webpack/babel conflict

I am trying to run npm run dev for a Vue project but I keep getting the following output:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: babel-loader#7.1.5
npm ERR! Found: webpack#5.75.0
npm ERR! node_modules/webpack
npm ERR! peer webpack#"^5.0.0" from css-loader#6.7.2
npm ERR! node_modules/css-loader
npm ERR! dev css-loader#"^6.7.2" from the root project
npm ERR! peer webpack#"^5.20.0" from html-webpack-plugin#5.5.0
npm ERR! node_modules/html-webpack-plugin
npm ERR! dev html-webpack-plugin#"^5.5.0" from the root project
npm ERR! 8 more (postcss-loader, terser-webpack-plugin, url-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack#"2 || 3 || 4" from babel-loader#7.1.5
npm ERR! node_modules/babel-loader
npm ERR! dev babel-loader#"^7.1.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: webpack#4.46.0
npm ERR! node_modules/webpack
npm ERR! peer webpack#"2 || 3 || 4" from babel-loader#7.1.5
npm ERR! node_modules/babel-loader
npm ERR! dev babel-loader#"^7.1.1" 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.
I have no idea what to do, I have tried uninstalling vue-cli and tried re-installing it (I'm not sure if this messed up my packages). Is there a way to cleanly delete everything and start fresh? If anyone can help that would be much appreciated!
Update:
I tried starting a new project with vue init webpack frontend in a new folder and tried installing axios and am getting the following error
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: vuex#4.1.0
npm ERR! Found: vue#2.7.14
npm ERR! node_modules/vue
npm ERR! vue#"^2.5.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue#"^3.2.0" from vuex#4.1.0
npm ERR! node_modules/vuex
npm ERR! vuex#"^4.1.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: vue#3.2.45
npm ERR! node_modules/vue
npm ERR! peer vue#"^3.2.0" from vuex#4.1.0
npm ERR! node_modules/vuex
npm ERR! vuex#"^4.1.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.
I recently updated my version of node (v19.1.0) and npm (v8.19.3), could that be an issue? It generally seems like I am getting a bunch of conflicts every time I try to install new packages. Is there a way to just start clean?
Probably one of your packages is outdated, according to the error. I guess it's the babel loader.
Method 1 Upgrading or Updating your packages might solve the dependency error.
Method 2 Try running npm install --force or npm install --legacy-peer-deps. It should work.

Upgrading Ionic 5 [Angular] project to Ionic 6, having issues with dependencies

I am trying to update my Ionic 5 project to Ionic 6. I followed the steps outlined on the ionic page stating the command to upgrade is:
npm install #ionic/angular#6
The output I am getting is this, I don't know how to solve this problem:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: Project#0.0.2
npm ERR! Found: #angular/core#8.1.3
npm ERR! node_modules/#angular/core
npm ERR! #angular/core#"~8.1.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer #angular/core#">=12.0.0" from #ionic/angular#6.3.0
npm ERR! node_modules/#ionic/angular
npm ERR! #ionic/angular#"6" 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.
npm ERR!
npm ERR! See /x/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /x/.npm/_logs/2022-10-11T23_20_13_132Z-debug.log
Instructions I followed from are here: https://ionicframework.com/docs/intro/upgrading-to-ionic-6
Read your error:
npm ERR! Found: #angular/core#8.1.3
npm ERR! node_modules/#angular/core
npm ERR! #angular/core#"~8.1.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer #angular/core#">=12.0.0" from #ionic/angular#6.3.0
Even though you have not posted your package.json it is safe bet you have Angular 8.1.2 installed and NOT the minimum of Angular 12+ as stated in the first bullet point of the upgrade guide you linked.
"Ionic 6 supports Angular 12+. Update to the latest version of Angular by following the Angular Update Guide."

Resolving dependency conflict for npm install in Angular application

I had several error messages for overriding peer dependencies when doing an npm install. After following the steps proposed by the accepted solution to this post. The most essential part being change the ~ versions to ^, remove node_modules and (if it exists) package-lock.json and run npm install again. I have now reduced the error message to the following :
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: console#0.0.0
npm ERR! Found: tslib#2.4.0
npm ERR! node_modules/tslib
npm ERR! tslib#"^2.0.3" from the root project
npm ERR! tslib#"^2.0.0" from #angular/cdk#10.2.7
npm ERR! node_modules/#angular/cdk
npm ERR! #angular/cdk#"^10.2.0" from the root project
npm ERR! peer #angular/cdk#">=9.0.0" from mat-table-exporter#9.1.2
npm ERR! node_modules/mat-table-exporter
npm ERR! mat-table-exporter#"^9.0.2" from the root project
npm ERR! 1 more (#angular/material)
npm ERR! 6 more (#angular/common, #angular/core, #angular/material, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer tslib#"^1.10.0" from mat-table-exporter#9.1.2
npm ERR! node_modules/mat-table-exporter
npm ERR! mat-table-exporter#"^9.0.2" 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.
npm ERR!
npm ERR! See /my/path/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /my/path/.npm/_logs/2022-07-21T15_27_07_820Z-debug-0.log
How do I solve this dependency issue? I cannot simply use --force or --legacy-peer-deps because my next step afterwards is moving from Angular 10 to 13. I tried doing the upgrade without fixing this issue and it forces #angular/cdk to remain at 10.x.x

Errors in dependency tree every time I install a fresh react-app

It is been a while that I am getting an error every time I create a react app.
I tried to remove all node/npm versions and I reinstall a clean one with the latest node LTS, however, I am still getting the below error
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: type-fest#0.21.3
npm ERR! node_modules/type-fest
npm ERR! type-fest#"^0.21.3" from ansi-escapes#4.3.2
npm ERR! node_modules/ansi-escapes
npm ERR! ansi-escapes#"^4.2.1" from #jest/core#26.6.3
npm ERR! node_modules/#jest/core
npm ERR! #jest/core#"^26.6.0" from jest#26.6.0
npm ERR! node_modules/jest
npm ERR! peer jest#"^26.0.0" from jest-watch-typeahead#0.6.1
npm ERR! node_modules/jest-watch-typeahead
npm ERR! 1 more (react-scripts)
npm ERR! 1 more (jest-cli)
npm ERR! ansi-escapes#"^4.3.1" from jest-watch-typeahead#0.6.1
npm ERR! node_modules/jest-watch-typeahead
npm ERR! jest-watch-typeahead#"0.6.1" from react-scripts#4.0.3
npm ERR! node_modules/react-scripts
npm ERR! react-scripts#"^4.0.3" from the root project
npm ERR! 2 more (jest-watcher, terminal-link)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional type-fest#"^0.13.1" from #pmmmwh/react-refresh-webpack-plugin#0.4.3
npm ERR! node_modules/#pmmmwh/react-refresh-webpack-plugin
npm ERR! #pmmmwh/react-refresh-webpack-plugin#"0.4.3" from react-scripts#4.0.3
npm ERR! node_modules/react-scripts
npm ERR! react-scripts#"^4.0.3" 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.
npm ERR!
npm ERR! See /Users/johnnys/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/johnnys/.npm/_logs/2021-07-10T18_33_36_275Z-debug.log
You are getting the same type of error from a similar post about this issue npm audit fix --force never able to avoid vulnerabilities
There is also a closed ticket in GitHub create-react-app repo. Here is one of the answers:
Hi,
ensure that
your dependencies (including NodeJS/npm/npx/yarn) are up-to-date
ensure that CRA is not installed globally Follow
https://create-react-app.dev/docs/getting-started/ guide to get
started
You need probably keep updating the dependecies to the latest version and wait untill the latest release fix this issue.

Resources