How to Fix "ERESOLVE Unable to Resolve Dependency Tree" Error While Creating a React App

How to Fix Dependency Errors While Creating a React App

If you're trying to set up a React app using npx create-react-app and encounter the following error:

npm error code ERESOLVE  
npm error ERESOLVE unable to resolve dependency tree  
npm error Found: react@19.0.0  
npm error Could not resolve dependency:  
npm error peer react@"^18.0.0" from @testing-library/react@13.4.0  

Don't worry! This issue occurs due to dependency conflicts between react, react-dom, and other packages like @testing-library/react. Below are two simple ways to fix this issue.

Step 1: Try Fixing It With npm

Before switching to Yarn, you can resolve the issue by installing the missing or incompatible dependencies manually. Here's how:

1. After running npx create-react-app my-app, if the error appears, navigate to your project folder:

   cd my-app

2. Install the missing web-vitals dependency:

   npm install web-vitals

3. Check for other dependency conflicts (e.g., React version). If needed, install compatible versions of React and React DOM:

   npm install react@18.2.0 react-dom@18.2.0

Once all dependencies are resolved, start the development server:

npm start

This should fix the issue. However, if you face further dependency errors, proceed to the next solution.

Step 2: Use Yarn as an Alternative

Yarn is an alternative package manager to npm, and it often handles dependency resolution better in these cases. Follow these steps:

1. If Yarn isn’t installed, install it globally:

   npm install -g yarn

2. Create the React app using Yarn instead of npm:

   yarn create react-app my-app

3. Once the setup completes, navigate to your app folder and start the development server:

   cd my-app  
   yarn start

When Should You Use Each Method?

• If you want to stick with npm, manually resolving dependency conflicts (npm install web-vitals, react@18.2.0) is a good choice.
• If you prefer a more streamlined setup with fewer manual fixes, Yarn is a great alternative.

Conclusion

Dependency issues can feel frustrating, but they’re manageable with the right approach. Start by resolving conflicts with npm, and if that doesn’t work, switch to Yarn for a smoother setup experience. Either way, you’ll have your React app running in no time!