Get help on Discord

Sanity v3 styled-components peer dependency conflict on upgrade

13 replies
Last updated: Apr 24, 2024
I am attempting to update a simple Sanity project to the latest dependencies. Here is my current package.json . Per documentation , I am doing 
npm install sanity@latest
and getting the immediate failure:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: loumarc@1.0.0
npm ERR! Found: styled-components@5.3.11
npm ERR! node_modules/styled-components
npm ERR!   styled-components@"^5.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer styled-components@"^6.1" from sanity@3.38.0
npm ERR! node_modules/sanity
npm ERR!   sanity@"3.38.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.
I don't care about 
styled-components
. I don't use 
styled-components
. I assume the only reason this is in my 
package.json
is because Sanity needs it. I tried removing it from my deps, and still get this error. I am at a loss. What is this error trying to tell me? How do I fix it?
AI Update

This error is telling you that Sanity v3.38.0 requires styled-components version 6.1 or higher, but your project currently has version 5.3.11 installed. Even though you're not directly using styled-components in your code, it's a peer dependency of Sanity Studio itself (specifically packages like @sanity/ui and @sanity/vision that Studio depends on).

Starting around Sanity v3.37-3.38, the platform updated its peer dependency requirement for styled-components from v5 to v6. Your project still has v5 installed, creating this conflict.

How to fix it:

Option 1: Update styled-components alongside Sanity (recommended)

Upgrade styled-components to v6 at the same time:

npm install sanity@latest styled-components@^6.1

This is the cleanest solution and ensures compatible dependencies.

Option 2: Delete package-lock.json and reinstall (most reliable)

Based on the community discussion, this often resolves the issue:

rm package-lock.json
npm install sanity@latest styled-components@^6.1

The package-lock.json file can sometimes lock you into incompatible dependency trees, and removing it allows npm to resolve dependencies fresh. Multiple community members confirmed this approach worked when other methods didn't.

Option 3: Update your package.json manually

Edit your package.json to change the styled-components version:

"styled-components": "^6.1.8"

Then run:

npm install

Option 4: Use legacy peer deps flag (temporary workaround)

If you need a quick bypass (though not recommended long-term):

npm install sanity@latest --legacy-peer-deps

As one community member noted, this is "frowned upon" and "shouldn't be necessary" - it's asking for potential future issues.

Why this happened:

The error specifically mentions @sanity/vision@3.14.4 which has a peer dependency on styled-components@"^5.2", while newer Sanity packages require v6. This creates a conflict. The sanity upgrade documentation mentions that when upgrading from earlier versions, you may need to upgrade additional dependencies like styled-components and @sanity/ui.

Also check: If you have @sanity/ui or @sanity/vision explicitly listed in your package.json, make sure to update those to their latest versions as well, as older versions may also require styled-components v5.

Show original thread
13 replies
I am using node v20.12.2 and npm 10.5.0
... and if the answer is to use 
--legacy-peer-deps
well isn't that a temporary solution? Isn't the best practice to keep your dependencies up to date? Feels like 
--legacy-peer-deps
is asking for potential future issues.
1. update the styled components
2. if 1 is not working uninstall the package "npm uninstall styled-components" and remove "node modules" and "package-lock.json" and run "npm i"
Did 1, got the same error.
Did 2 because that's the equivalent of "did you turn it off and back on" for Node/npm 🤣
🤷‍♂️
Edit your package.json file, and change the line with styled-components so it looks like this
    "styled-components": "^6.1.8",
Now you have allowed it to update past major version 5, and things should work!

Sometimes it helps to run 
npm outdated
to get a list of everything that has an update available.
Thanks
user E
. I think y'all are starting to see my frustration. These are all great ideas. I have done all of these, and I still get this error when running 
npm install sanity@latest


npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @sanity/vision@3.14.4
npm ERR! Found: styled-components@6.1.8
npm ERR! node_modules/styled-components
npm ERR!   peer styled-components@"^5.2 || ^6" from @sanity/ui@1.9.3
npm ERR!   node_modules/@sanity/ui
npm ERR!     @sanity/ui@"^1.7.2" from @sanity/vision@3.14.4
npm ERR!     node_modules/@sanity/vision
npm ERR!       @sanity/vision@"^3.14.4" from the root project
npm ERR!     @sanity/ui@"^1.7.4" from the root project
npm ERR!   styled-components@"^6.1.8" from the root project
npm ERR!   1 more (sanity)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer styled-components@"^5.2" from @sanity/vision@3.14.4
npm ERR! node_modules/@sanity/vision
npm ERR!   @sanity/vision@"^3.14.4" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: styled-components@5.3.11
npm ERR! node_modules/styled-components
npm ERR!   peer styled-components@"^5.2" from @sanity/vision@3.14.4
npm ERR!   node_modules/@sanity/vision
npm ERR!     @sanity/vision@"^3.14.4" from the root project
I went back through the advice here and realized I missed a KEY point
user U
made. Remove the 
package-lock.json
. After I did that 
npm install sanity@latest
worked.
yes it will work i got the same error day before yesterday i am solving it for 6 days after that i read lots of documentations and discussions and finally found it
I guess this is a skill issue on my part. I have to know to remove 
package-lock.json
when upgrading 
npm
packages?
It is frowned upon, but I sometimes resort to it as well. It shouldn’t be necessary.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?