npm peer dependency error installing packages with React

I understand you're hitting ERESOLVE peer dependency errors when trying to install packages like styled-components and react-icons. This is a common issue in 2025, especially if you're working with React 19, which was recently released and many popular npm packages haven't fully updated their peer dependency declarations yet.

Why This Happens

The error occurs because:

• React 19 is very new (released late 2024)
• Many packages like styled-components and react-icons explicitly declare peer dependencies for React 16, 17, or 18
• npm 7+ enforces peer dependencies strictly by default, causing installation to fail

Solutions (in order of preference)

1. Use --legacy-peer-deps flag (Quickest fix)

npm install styled-components --legacy-peer-deps
npm install react-icons --legacy-peer-deps

This tells npm to ignore peer dependency conflicts. The packages will likely work fine despite the warnings, since React 19 maintains good backward compatibility.

2. Use --force flag

npm install styled-components --force

This overrides the peer dependency check. More aggressive than --legacy-peer-deps but works when that doesn't.

3. Set it globally in .npmrc

Create or edit .npmrc in your project root:

legacy-peer-deps=true

This applies the flag to all future installs automatically.

4. Wait for package updates or use compatible versions

• styled-components v6 has better React 19 support than v5
• Check if react-icons has a newer version that supports React 19
• Alternatively, temporarily downgrade to React 18 if you don't need React 19 features yet

5. For Sanity Studio projects specifically

If you're using Sanity Studio v4, note that it requires Node.js 20+ and React 18+. Make sure there aren't conflicting versions by checking:

npm ls styled-components
npm ls react

If you see multiple versions, that could be the root cause. Sanity Studio internally uses styled-components, so version conflicts can cause issues.

My Recommendation

Start with --legacy-peer-deps for both packages. React 19's backward compatibility is excellent, and these packages will almost certainly work fine. The peer dependency declarations just haven't been updated yet because React 19 is so new.

npm install styled-components react-icons --legacy-peer-deps

Then test your app thoroughly. If everything works (which it likely will), you're good to go! If you continue having issues, check your React version with npm ls react to confirm what you're actually running.