Invalid Hook Call Warnings in Sanity Studio with React 18.2.0
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app "@sanity/icons": "2.2.2",
"@sanity/image-url": "1.0.2",
"@sanity/ui": "1.3.1",
"@sanity/vision": "3.8.3",
"next": "13.2.4",
"next-sanity": "4.1.6",
"react": "18.2.0",
"react-dom": "18.2.0",
"sanity": "3.8.3",
"sanity-typed-schema-builder": "2.1.1",
"styled-components": "5.2.0"plugins: [deskTool(), visionTool()]
Any ideas on how to fix this?
This is a classic styled-components version mismatch issue! The problem is that you have styled-components 5.2.0, but @sanity/ui 1.3.1 requires styled-components 5.3.x or higher as a peer dependency.
When you have an incompatible version of styled-components, it can cause React to be bundled multiple times, which triggers the "Invalid hook call" warning you're seeing.
The Fix
Upgrade your styled-components to version 5.3.x or higher:
npm install styled-components@^5.3.0
# or
yarn add styled-components@^5.3.0After upgrading, delete your node_modules and lock file, then reinstall:
rm -rf node_modules package-lock.json
npm installThis should resolve all 50 warnings you're seeing.
Why This Happens
@sanity/ui (which Sanity Studio v3 depends on) uses styled-components internally and has strict peer dependency requirements. When the versions don't match, you can end up with:
- Multiple copies of React in your bundle
- Multiple copies of styled-components
- React hooks being called from different React instances, causing the invalid hook call error
The @sanity/ui documentation lists styled-components as a required peer dependency, and checking @sanity/ui@1.3.1's package.json confirms it needs styled-components ^5.3.0.
Additional Tips
If upgrading styled-components doesn't completely resolve it (especially with Next.js embedded Studio setups), you can also try:
Check for duplicate React versions by running:
npm ls reactAdd resolution/overrides to your package.json to force a single version:
"overrides": { "styled-components": "^5.3.0" }(or
"resolutions"if using Yarn)Consider upgrading to newer versions of the Sanity packages - you're on 3.8.3, and there have been many improvements since then.
The styled-components upgrade should fix your issue immediately though!
Show original thread27 replies
Was this answer helpful?
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.
