Resolving React 19 Dependency Conflicts in Create React App

Problem Statement: React Compatibility Issues After Upgrade

When attempting to create a new React application using npx create-react-app, you may encounter dependency conflicts after React's recent version 19 release. The core issue manifests as:

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

This conflict arises because:

• You're installing React 19 (the latest version)
• The testing library (@testing-library/react@13.4.0) hasn't updated its peer dependency to support React 19
• Create React App's default configuration hasn't adapted to React 19 dependencies

Recommended Solutions

Preferred Method: Create React App with Vite

Vite has become the modern standard for React development, offering faster performance and more flexible dependency resolution:

1. Create a new Vite React project:

   npm create vite@latest react-app -- --template react
   cd react-app

2. Install dependencies:

   npm install

3. Add Testing Library with compatible versions:

   npm install -D @testing-library/jest-dom@^6.0.0 @testing-library/react@^14.0.0

4. Start development server:

   npm run dev

Why Vite?

• Uses esbuild for lightning-fast builds
• Better handling of modern JavaScript features
• More future-proof dependency management
• Growing industry adoption (including official React docs)

Alternative 1: Use Create React App with React 18

If you prefer to stay with Create React App, install with explicit React 18 dependencies:

npx create-react-app react-app --template react-app@v5.1.0

This forces the installation of React 18 versions, avoiding the compatibility conflict.

Alternative 2: Force Install with Legacy Peer Dependencies

Use as a temporary workaround if you require React 19 immediately:

npx create-react-app@latest react-app --legacy-peer-deps

Use with Caution

This bypasses dependency checks and may result in:

• Unexpected runtime errors
• Testing library incompatibilities
• Broken production builds

Understanding the Conflict

Dependency Explanation

This graph shows how @testing-library/react@13.4.0 enforces a React 18 peer dependency while create-react-app installs React 19.

Why This Happened

1. React 19 introduced breaking changes
2. Testing library hasn't released a React-19 compatible version yet
3. Create React App installs latest versions by default
4. npm's strict peer dependency enforcement (npm v7+)

Additional Troubleshooting Steps

Clear npm Cache

npm cache clean --force

Verify Node Version

Ensure you're using a current LTS version (v20.x):

node -v

Complete Reinstallation

1. Remove global Create React App:

   npm uninstall -g create-react-app

2. Clear npm cache:

   npm cache clean --force

3. Verify installation with Vite or explicit React 18 template

Best Practices Going Forward

1. Check React Ecosystem Compatibility before major version upgrades
2. Use Version Pinning: Explicitly specify versions in package.json
3. Consider Vite or Next.js for new projects
4. Monitor Testing Library Releases for React 19 support updates

Current Status (2024)

• @testing-library/react@14.1.0 (latest) now supports React 19
• Create React App templates have updated test configurations

When testing library compatibility improves, create projects with:

npx create-react-app@latest react-app