Craco - Could not resolve dependency error

Question

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: [email protected]
npm ERR! Found: [email protected]
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/[email protected]
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! 

Answer 1

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

Answer 2

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.