Ionic start fails because of dependency issue - node.js

I just installed Ionic with
npm install -g #ionic/cli
When I try to run
ionic start ionic-test-app
the initialization fails with a npm dependency error.
Something about a wrong version of a package called postcss.
$ ionic start ionic-test-app
Pick a framework! 😁
Please select the JavaScript framework to use for your new app. To bypass this prompt next time,
supply a value for the --type option.
? Framework: Angular
Let's pick the perfect starter template! 💪
Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your
app. To bypass this prompt next time, supply template, the second argument to ionic start.
? Starter template: blank
? ./ionic-test-app exists. Overwrite? Yes
✔ Preparing directory ./ionic-test-app in 6.79ms
✔ Downloading and extracting blank starter in 188.52ms
? Integrate your new app with Capacitor to target native iOS and Android? Yes
> ionic integrations enable capacitor --quiet -- ionic-test-app io.ionic.starter
> npm i --save -E #capacitor/core#latest
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: postcss#8.2.14
npm ERR! node_modules/postcss
npm ERR! postcss#"8.2.14" from #angular-devkit/build-angular#0.1102.13
npm ERR! node_modules/#angular-devkit/build-angular
npm ERR! dev #angular-devkit/build-angular#"~0.1102.4" from the root project
npm ERR! peer #angular-devkit/build-angular#"^0.1102.4" from #ionic/angular-toolkit#3.1.1
npm ERR! node_modules/#ionic/angular-toolkit
npm ERR! dev #ionic/angular-toolkit#"^3.1.1" from the root project
npm ERR! peer postcss#"^8.1.0" from autoprefixer#10.2.4
npm ERR! node_modules/autoprefixer
npm ERR! autoprefixer#"10.2.4" from #angular-devkit/build-angular#0.1102.13
npm ERR! node_modules/#angular-devkit/build-angular
npm ERR! dev #angular-devkit/build-angular#"~0.1102.4" from the root project
npm ERR! 1 more (#ionic/angular-toolkit)
npm ERR! 9 more (css-loader, cssnano, postcss-import, postcss-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer postcss#"^8.2.15" from cssnano-preset-default#5.1.0
npm ERR! node_modules/cssnano/node_modules/cssnano-preset-default
npm ERR! cssnano-preset-default#"^5.0.1" from cssnano#5.0.2
npm ERR! node_modules/cssnano
npm ERR! cssnano#"5.0.2" from #angular-devkit/build-angular#0.1102.13
npm ERR! node_modules/#angular-devkit/build-angular
npm ERR! dev #angular-devkit/build-angular#"~0.1102.4" from the root project
npm ERR! 1 more (#ionic/angular-toolkit)
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 /home/sekthor/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/sekthor/.npm/_logs/2021-05-20T17_05_21_790Z-debug.log
[ERROR] An error occurred while running subprocess npm.
npm i --save -E #capacitor/core#latest exited with exit code 1.
Re-running this command with the --verbose flag may provide more information.
Installing dependencies may take several minutes.
──────────────────────────────────────────────────────────────────────────────
Ionic Advisory, tailored solutions and expert services by Ionic
Go to market faster 🏆
Real-time troubleshooting and guidance 💁
Custom training, best practices, code and architecture reviews 🔎
Customized strategies for every phase of the development lifecycle 🔮
👉 https://ion.link/advisory 👈
──────────────────────────────────────────────────────────────────────────────
> npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: postcss#8.2.14
npm ERR! node_modules/postcss
npm ERR! postcss#"8.2.14" from #angular-devkit/build-angular#0.1102.13
npm ERR! node_modules/#angular-devkit/build-angular
npm ERR! dev #angular-devkit/build-angular#"~0.1102.4" from the root project
npm ERR! peer #angular-devkit/build-angular#"^0.1102.4" from #ionic/angular-toolkit#3.1.1
npm ERR! node_modules/#ionic/angular-toolkit
npm ERR! dev #ionic/angular-toolkit#"^3.1.1" from the root project
npm ERR! peer postcss#"^8.1.0" from autoprefixer#10.2.4
npm ERR! node_modules/autoprefixer
npm ERR! autoprefixer#"10.2.4" from #angular-devkit/build-angular#0.1102.13
npm ERR! node_modules/#angular-devkit/build-angular
npm ERR! dev #angular-devkit/build-angular#"~0.1102.4" from the root project
npm ERR! 1 more (#ionic/angular-toolkit)
npm ERR! 9 more (css-loader, cssnano, postcss-import, postcss-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer postcss#"^8.2.15" from cssnano-preset-default#5.1.0
npm ERR! node_modules/cssnano/node_modules/cssnano-preset-default
npm ERR! cssnano-preset-default#"^5.0.1" from cssnano#5.0.2
npm ERR! node_modules/cssnano
npm ERR! cssnano#"5.0.2" from #angular-devkit/build-angular#0.1102.13
npm ERR! node_modules/#angular-devkit/build-angular
npm ERR! dev #angular-devkit/build-angular#"~0.1102.4" from the root project
npm ERR! 1 more (#ionic/angular-toolkit)
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 /home/sekthor/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/sekthor/.npm/_logs/2021-05-20T17_05_28_760Z-debug.log
[ERROR] An error occurred while running subprocess npm.
npm i exited with exit code 1.
Re-running this command with the --verbose flag may provide more information.
I am fairly new to npm and I can't seem to find a solution on this site or anywhere else on the internet.
I have tried both the --force and --legacy-peer-deps, but received the same error.
What is the reason for this error and how do I fix it?
My node, npm & ionic versions are:
$ node --version
v16.2.0
$ npm --version
7.13.0
$ ionic --version
6.16.1

That was my first guess - installing a more recent version of postcss, but unfortunately that did not solve it for me. Solution was downgrading from npm's version 7 to version 6.
npm install -g npm#6

For some reason I couldn't get it to work on node version 16.2.0.
However, using node version manager nvm I installed a second instance of node, the LTS version 14.17.0.
With this downgrade, the setup process works.
nvm install 14.17.0

I ran into this error and manually installing postcss npm i postcss fixed it as the stack trace shows a dependency was relying on the latest version of postcss version 8.2.15 and what was found was version 8.2.14.

Had a similar issue with node start using npm v7.5.2 and was fixed by upgrading to v7.22.0.

Related

How should I resolve this Angular node package module dependency conflict?

I just updated all my node modules using npm-check-updates.
I did this so I could install the latest version ngx-stripe, which needed some updated node modules that I didn't have installed.
After updating all my node modules and then trying to install ngx-stripe I got this error below, showing me that ngx-gallery-9#1.0.6 has a peer dependency of tslib 1.10.0, which is true, but my installed version is tslib 2.5.0 in node modules.
QUESTION - Should I use --force or --legacy-peer-deps when running the npm install for ngx-stripe or is there something else I should try first like updating the tslib peer dependency for ngx-gallery-9?
Here is what I see:
➜ client git:(master) ✗ npm install ngx-stripe #stripe/stripe-js
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: ngx-gallery-9#1.0.6
npm ERR! Found: tslib#2.5.0
npm ERR! node_modules/tslib
npm ERR! tslib#"^2.3.0" from #angular/animations#15.1.2
npm ERR! node_modules/#angular/animations
npm ERR! peerOptional #angular/animations#"15.1.2" from #angular/platform-browser#15.1.2
npm ERR! node_modules/#angular/platform-browser
npm ERR! peer #angular/platform-browser#"15.1.2" from #angular/forms#15.1.2
npm ERR! node_modules/#angular/forms
npm ERR! peer #angular/forms#"^11.2.11 || ^12.0.4 || ^13.0.0 || ^14.0.0 || ^15.0.0" from #zxing/ngx-scanner#3.8.0
npm ERR! node_modules/#zxing/ngx-scanner
npm ERR! 2 more (ngx-bootstrap, the root project)
npm ERR! 3 more (#angular/platform-browser-dynamic, #angular/router, the root project)
npm ERR! peer #angular/animations#"^15.0.0" from ngx-bootstrap#10.2.0
npm ERR! node_modules/ngx-bootstrap
npm ERR! ngx-bootstrap#"^10.2.0" from the root project
npm ERR! 1 more (the root project)
npm ERR! tslib#"^2.3.0" from #angular/common#15.1.2
npm ERR! node_modules/#angular/common
npm ERR! peer #angular/common#"15.1.2" from #angular/forms#15.1.2
npm ERR! node_modules/#angular/forms
npm ERR! peer #angular/forms#"^11.2.11 || ^12.0.4 || ^13.0.0 || ^14.0.0 || ^15.0.0" from #zxing/ngx-scanner#3.8.0
npm ERR! node_modules/#zxing/ngx-scanner
npm ERR! #zxing/ngx-scanner#"^3.8.0" from the root project
npm ERR! 2 more (ngx-bootstrap, the root project)
npm ERR! peer #angular/common#"^15.0.0 || ^16.0.0" from #angular/google-maps#15.1.2
npm ERR! node_modules/#angular/google-maps
npm ERR! #angular/google-maps#"^15.1.2" from the root project
npm ERR! 10 more (#angular/platform-browser, ...)
npm ERR! 20 more (#angular/compiler, #angular/compiler-cli, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer tslib#"^1.10.0" from ngx-gallery-9#1.0.6
npm ERR! node_modules/ngx-gallery-9
npm ERR! ngx-gallery-9#"^1.0.6" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: tslib#1.14.1
npm ERR! node_modules/tslib
npm ERR! peer tslib#"^1.10.0" from ngx-gallery-9#1.0.6
npm ERR! node_modules/ngx-gallery-9
npm ERR! ngx-gallery-9#"^1.0.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!
npm ERR! For a full report see:
npm ERR! /Users/charles/.npm/_logs/2023-01-27T08_58_58_320Z-eresolve-report.txt
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/charles/.npm/_logs/2023-01-27T08_58_58_320Z-debug-0.log
➜ client git:(master) ✗
Your problem is completely unrelated to ngx-stripe, but whenever you run npm install, NPM tries to fix all of its dependencies in package.json at the same time, and because you have a problem with ngx-gallery-9, all npm installs are failing. You can ignore the error for now, using --legacy-peer-deps, which will tell NPM to not try to deal with peer dependencies and just let you install the thing you want to install (ngx-stripe).
With regards to fixing the error itself, there's not much you can do here. ngx-gallery-9 is using an older version of tslib, and hasn't been updated for a long time. There's currently an open bug requesting that the library maintainer update his packages.
More specifically,
Angular 15 requires tslib#"^2.3.0", but ngx-gallery-9 requires tslib#"^1.10.0". You can try forcing it to use the latest version by using --legacy-peer-deps during ALL your future npm installations, as well as running npm install tslib#^2.3.0 --save --legacy-peer-deps to manually choose to use the newer version, which will force the whole project to use tslib#"^2.3.0" and ignore ngx-gallery-9's complaints, but there's a strong possibility that ngx-gallery-9 won't work as expected.
Your best bet is to either
use a different gallery than ngx-gallery-9, or
Simply ignore the problem. Force everything to use tslib#"^2.3.0" with npm install tslib#^2.3.0 --save --legacy-peer-deps and hope ngx-gallery-9 won't have any errors, or
downgrade Angular to an earlier version (Which is very messy, and not really recommended unless you didn't intend to be using Angular 15).
Edit:
Or instead undo all the changes that npm-check-updates did, and instead just install an older version of ngx-stripe that's compatible with all of your packages. ngx-stripe has a chart showing which version to use depending on your version of Angular, here: https://www.npmjs.com/package/ngx-stripe
Just type:
npm install ngx-stripe #stripe/stripe-js --force
or npm install ngx-stripe #stripe/stripe-js--legacy-peer-deps

REACT NATIVE - Can't install Realm Sync - Expo version 44

I want to create a mobile app with React Native. I am using Expo and I want to use Realm Sync as my DB.
Info:
Im working on vs code (on mac)
Node.js version: 16.18.0
React version: 18.2.0
React native version: 0.69.6
npm 8.19.0
Problem:
We have installed Expo version 44 (because a later or earlier version of Expo does not match with realm), but can still not install Realm Sync. When I run
"npm install realm", I get the error below:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: realm#11.0.0
npm ERR! Found: react-native#0.69.6
npm ERR! node_modules/react-native
npm ERR! peer react-native#"*" from #react-native-community/cli#8.0.6
npm ERR! node_modules/#react-native-community/cli
npm ERR! #react-native-community/cli#"^8.0.4" from react-native#0.69.6
npm ERR! react-native#"0.69.6" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional react-native#">=0.70.0" from realm#11.0.0
npm ERR! node_modules/realm
npm ERR! realm#"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react-native#0.70.4
npm ERR! node_modules/react-native
npm ERR! peerOptional react-native#">=0.70.0" from realm#11.0.0
npm ERR! node_modules/realm
npm ERR! realm#"*" 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.
We have followed severol tutorials. One of them are Quick start with Sync
We are obviously missing something.
Can someone please help?
Try it: npm install realm#10.6.0

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."

npm install fails - version mismatch

i am new to npm, and have trouble running npm install on this repo: https://github.com/ttencate/jfxr
after the initial install failed with error code 1, i found resources pointing towards updating the package versions.
after running
npx npm-check-updates -u
npm install still fails, this time with a reasonable error stack:
p#MBP-von-up app % npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: jfxr-app#0.14.0
npm ERR! Found: eslint#8.19.0
npm ERR! node_modules/eslint
npm ERR! dev eslint#"^8.19.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint#">=1.6.0 <7.0.0" from eslint-loader#2.2.1
npm ERR! node_modules/eslint-loader
npm ERR! dev eslint-loader#"^2.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.
npm ERR!
npm ERR! See /Users/tp/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/tp/.npm/_logs/2022-07-05T13_34_08_046Z-debug-0.log
but i am still unclear on how to resolve this version mismatch.
also, running with the old version would be fine for me too, if it worked at all...
any help / tips towards resources appreciated!

npm chakra-ui install failing due to dependency conflicts

I'm trying to learn react/typescript and I'm following a tutorial line for line, but somehow getting this error when trying to install either #chakra-ui/react or #chakra-ui/core. It seems like a dependecy issue with react having been updated. Should I rollback react?
kyoudai.industries git:(master) ✗ npm install #chakra-ui/react framer-motion
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: kyoudai.industries#1.0.0
npm ERR! Found: react#17.0.1
npm ERR! node_modules/react
npm ERR! react#"^17.0.1" from the root project
npm ERR! peer react#"16.x || 17.x" from #chakra-ui/react#1.0.1
npm ERR! node_modules/#chakra-ui/react
npm ERR! #chakra-ui/react#"*" from the root project
npm ERR! 2 more (#emotion/react, #emotion/styled)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.8" from framer-motion#2.9.4
npm ERR! node_modules/framer-motion
npm ERR! framer-motion#"*" from the root project
npm ERR! peer framer-motion#"^2.9.4" from #chakra-ui/react#1.0.1
npm ERR! node_modules/#chakra-ui/react
npm ERR! #chakra-ui/react#"*" 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/travis/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/travis/.npm/_logs/2020-11-24T22_38_57_297Z-debug.log
With this command you can solve the problem:
npm i #chakra-ui/react --legacy-peer-deps
I had the same issue but in Vue. I ran the following commands and it started working:
vue create test -p default && cd test && vue serve src/main.js,
It seems like it created a folder running some tests.
Then I ran: npm i -g #vue/cli-service-global..
Then: npm run serve-- to initiate the vue server.
Hopefully it gives you an idea how to solve that in React.
Good luck!

Resources