Get help on Discord

Invalid Hook Call Warnings in Sanity Studio with React 18.2.0

27 replies
Last updated: Nov 29, 2025
Hi all, I'm getting about 50 of these warnings in my console when I run Sanity Studio:

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
Here are my deps:


    "@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:

plugins: [deskTool(), visionTool()]

Any ideas on how to fix this?
AI Update

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.0

After upgrading, delete your node_modules and lock file, then reinstall:

rm -rf node_modules package-lock.json
npm install

This 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:

  1. Multiple copies of React in your bundle
  2. Multiple copies of styled-components
  3. 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:

  1. Check for duplicate React versions by running:

    npm ls react

  2. Add resolution/overrides to your package.json to force a single version:

    "overrides": {
  "styled-components": "^5.3.0"
}

    (or "resolutions" if using Yarn)

  3. 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 thread
27 replies

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?