Craco - Could not resolve dependency error - create-react-app

I am trying to setup TailwindCSS in my Create-React-App project and I am trying to install craco so that I need not eject my CRA
When I run the following command npm install #craco/craco, I get unable to resolve dependency tree error. Below is the detail of the error. What should I do? Thanks
npm install #craco/craco
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: exchange#0.1.0
npm ERR! Found: react-scripts#3.4.3
npm ERR! node_modules/react-scripts
npm ERR! react-scripts#"3.4.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-scripts#"^4.0.0" from #craco/craco#6.1.1
npm ERR! node_modules/#craco/craco
npm ERR! #craco/craco#"*" 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!

This works for me
npm install #craco/craco --save --legacy-peer-deps
With the below line you can also set --legacy-peer-deps permanently as a config option. Try to avoid this as you need to see which npm library/libraries in your project is/are having dependency issues.
npm config set legacy-peer-deps true

I've updated my package react-scripts to the latest version 4.x.
by running this command :
npm i react-scripts#latest
then lo and behold, I was able to install craco successfully.

Run this; it worked for me:
npm config set legacy-peer-deps true

Use yarn add, it would solve this for you, you don't need to do anything for the react-scripts version.

I think the error has to do with the dependency tree.
You have react-scripts#3.4.3 but #craco/craco requires react-scripts#4.0.0.
Simply run npm i react-scripts#4.0.0 and create craco.config.js file

i update my react app and then installed craco 5.05v

In my case using node v16.15.1 raising this error.
I resolved it by using node v16.13.1 with fixing the version in package.json
"engines": {
"node": "16.13.1"
},
You can also resolve by using yarn not npm.

Related issue:
Didn't want to upgrade react-scripts
So tried downgrading craco
It worked fine:
Commands that worked fine are below:
npm uninstall -g craco
npm uninstall -g #craco/craco
npm i -g craco#0.0.3
npm i -g #craco/craco#6.4.3
package.json contents:
"react-scripts": "^4.0.3",
"#craco/craco": "^6.4.3",
"craco": "^0.0.3",
If you are changing package.json then do:
npm i

npm install -f
Could help here.

Related

TypeError: Object(...) is not a function when trying to import VueRouter [duplicate]

i want to install vue-router but some errors occurs
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: routing01#1.0.0
npm ERR! Found: vue#2.6.14
npm ERR! node_modules/vue
npm ERR! vue#"^2.5.11" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue#"^3.2.0" from vue-router#4.0.15
npm ERR! node_modules/vue-router
npm ERR! vue-router#"4" 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 C:\Users\Peyman\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Peyman\AppData\Local\npm-cache\_logs\2022-05-31T07_48_48_170Z-debug-0.log
The problem is you have incompatible versions of vue and vue-router.
vue#2 requires vue-router#3
vue#3 requires vue-router#4
The error message indicates you have vue#2.6.14, and you're trying to install vue-router#4.0.15. Note that npm install -S vue-router (without a version specifier) defaults to the latest version, which is currently 4.0.15.
Don't use the --force or --legacy-peer-deps npm flags that are suggested in the error message because that would only install incompatible packages that would result in a runtime error.
Solution
A quick fix is to install vue-router#3:
npm install -S vue-router#3
Or you can upgrade to Vue 3, which requires uninstalling vue-template-compiler (the template compiler for Vue 2) and installing #vue/compiler-sfc (the template compiler for Vue 3):
npm uninstall -S vue-template-compiler
npm install -S vue#3 #vue/compiler-sfc
you can add by using plugin also using vue-cli.
try vue add router
btw use can install vuetify and eslint and many more things using vue add vuetify and vue add eslint
you can refer this: https://cli.vuejs.org/guide/plugins-and-presets.html#plugins
Try -
npm install --save --legacy-peer-deps
This command will tell npm to ignore peer dependencies

i cant install vue-router by npm

i want to install vue-router but some errors occurs
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: routing01#1.0.0
npm ERR! Found: vue#2.6.14
npm ERR! node_modules/vue
npm ERR! vue#"^2.5.11" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue#"^3.2.0" from vue-router#4.0.15
npm ERR! node_modules/vue-router
npm ERR! vue-router#"4" 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 C:\Users\Peyman\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Peyman\AppData\Local\npm-cache\_logs\2022-05-31T07_48_48_170Z-debug-0.log
The problem is you have incompatible versions of vue and vue-router.
vue#2 requires vue-router#3
vue#3 requires vue-router#4
The error message indicates you have vue#2.6.14, and you're trying to install vue-router#4.0.15. Note that npm install -S vue-router (without a version specifier) defaults to the latest version, which is currently 4.0.15.
Don't use the --force or --legacy-peer-deps npm flags that are suggested in the error message because that would only install incompatible packages that would result in a runtime error.
Solution
A quick fix is to install vue-router#3:
npm install -S vue-router#3
Or you can upgrade to Vue 3, which requires uninstalling vue-template-compiler (the template compiler for Vue 2) and installing #vue/compiler-sfc (the template compiler for Vue 3):
npm uninstall -S vue-template-compiler
npm install -S vue#3 #vue/compiler-sfc
you can add by using plugin also using vue-cli.
try vue add router
btw use can install vuetify and eslint and many more things using vue add vuetify and vue add eslint
you can refer this: https://cli.vuejs.org/guide/plugins-and-presets.html#plugins
Try -
npm install --save --legacy-peer-deps
This command will tell npm to ignore peer dependencies

ERESOLVE unable to resolve dependency tree - for #mui/material

I am trying to install material UI as described on the home page, but I get a dependency tree error :
C:\dev\shape-shop-front-end>npm install #mui/material
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: my-app#0.1.0
npm ERR! Found: react#16.14.0
npm ERR! node_modules/react
npm ERR! react#"^16.13.1" from the root project
npm ERR! peer react#">=16.8.0" from #emotion/react#11.7.1
npm ERR! node_modules/#emotion/react
npm ERR! node_modules/#mui/material
npm ERR! #mui/material#"*" from the root project
npm ERR!
In my package.json I have "react": "^16.13.1" .
As I understand it, this error is saying that a MUI package needs react 16.8.0
Indeed, a sub-dependency of it, named #emotion/react#11.7.1, has listed the following peer dependencies you have to meet:
"peerDependencies": {
"#babel/core": "^7.0.0",
"react": ">=16.8.0"
}
source: https://github.com/emotion-js/emotion/blob/main/packages/react/package.json
I think this has to do with how new versions of NPM deal with peer dependencies: https://github.blog/2021-02-02-npm-7-is-now-generally-available/
As your react version seems OK, I would go with this suggestion:
You have the option to retry with --force to bypass the conflict or --legacy-peer-deps command to ignore peer dependencies entirely (this behavior is similar to versions 4-6).
Try using --force.
That's what worked for me
npm install #mui/material --force
I have a feeling it's a dependency conflict that came with the recent React upgrade...
Looks like updating dependencies in package.json is the only way to make this happen now.
$ npm install -g npm-check-updates
$ ncu -u
$ npm install
or see how to update each dependency in package.json
after updating, now try to install your material UI.
use this command instead
npm install #material-ui/core
If you're using it for the icon, then use this
npm install #material-ui/core #material-ui/icons
Try using
npm install #material-ui/core --force

I am not able to install npm packages on my vaadin project

happy new year!
Any package that I am trying to install I am getting this:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: #rollup/pluginutils#3.1.0
npm ERR! Found: dev #rollup/plugin-typescript#"^3.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev #rollup/plugin-typescript#"^3.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.
npm ERR!
npm ERR! See ~/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! ~/.npm/_logs/2022-01-02T16_54_42_026Z-debug.log
I am trying to use this npm install --save #fortawesome/fontawesome-free
I don't understand what could be wrong.
as it said in the error, you are handling an old package dependency and therefore you can use --force, or --legacy-peer-deps
Another solution that worked for me, and I think is better, try to install it through pnpm, as it seems to handle it.
I will guess you have decided to update npm itself recently on your local env.
if you run the following (as per your error message), it should install dependencies without trouble.
npm i --legacy-peer-deps
Running npm v8+ to update your dependencies will upgrade the version of your package-lock.json. The issue is that your repo libraries have many old dependencies which might not be compatible with this update. When you run npm with --legacy-peer-deps it uses the old ways...
I have encountered similar problems. After checking, I found that the primary group permission of the node program home directory is 500.500, which needs to be set to root root
Did you try this :
sudo npm install --save #fortawesome/fontawesome-free

cannot install #material-ui/core using npm

I tried to install #material-ui/core librabry but then npm throws the error below
I used the
npm install #material-ui
command
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: school-demo#0.1.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!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.8.0" from #material-ui/core#4.11.0
npm ERR! node_modules/#material-ui/core
npm ERR! #material-ui/core#"*" 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 /home/freduah/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/freduah/.npm/_logs/2020-11-02T14_50_03_045Z-debug.log
freduah#freduah:~/school-demo$ ```
MaterialUI 4 doesn't support React 17 yet. Please check the issue created on github https://github.com/mui-org/material-ui/issues/23306.
You can try to install it by force by adding '-f':
npm install -f #material-ui/core
I had come across the same problem. These worked for me:
For core: npm -f install #material-ui/core
For icons: npm -f install #material-ui/icons
you can downgrade your react, it worked for me by this command:(I downgrade from v17)
npm install --save react#16.13.0 react-dom#16.13.0
Material UI is using emotion as a styling engine by default. If you want to use styled-components instead, run:
try to use this
npm install #mui/material #mui/styled-engine-sc styled-components
i highly recommend to read the document in thar website and not from npm
npm install #mui/material #emotion/react #emotion/styled
worked for me. Which I found on https://mui.com/
check your react versian, MaterialUI 4 doesn't support React 17. you can change youre version by
npm install --save react#16.13.0 react-dom#16.13.0
make sure Assuming you're using npm/yarn or another node package manager, dependency versions are listed in package.json.
Search for the react and react-dom packages under dependencies (or devDependencies) and replace their versions with 16.13.0. Then run npm install or yarn or whatever package manager you're using. This should be enough to downgrade to React 16.
Try
yarn add #material-ui/core & yarn add #material-ui/core
React 17 dont support material UI install previous versions or use yarn It will take some time but work perfectly fine
This worked for me
npm install -force #material-ui/core
Problem: npm install #material-ui/core
Solution:
npm install #mui/material #emotion/react #emotion/styled
OR
yarn add #mui/material #emotion/react #emotion/styled
npm install -f #material-ui/core
or
npm install #mui/material #emotion/react #emotion/styled --legacy-peer-deps
or You can downgrade react
npm install --save react#16.13.0 react-dom#16.13.0