Get help on Discord

Invalid Hook Call Warnings in Sanity Studio with React 18.2.0

27 replies
Last updated: May 25, 2023
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
Do you have any custom React in your Studio?
I do not
import { defineConfig } from 'sanity';
import { deskTool } from 'sanity/desk';

import { visionTool } from '@sanity/vision';

import { EnhancedToolbar } from './src/cms/components/enhanced-toolbar';
import { schemas } from './src/cms/schemas';

export default defineConfig({
  basePath: process.env.NODE_ENV === 'production' ? '/' : '/studio',
  name: 'default',
  title: 'Udacity CMS',
  projectId: process.env.SANITY_STUDIO_PROJECT_ID!,
  dataset: process.env.SANITY_STUDIO_DATASET!,

  plugins: [deskTool(), visionTool()],

  schema: {
    types: schemas,
  },

  // studio: {
  //   components: {
  //     toolMenu: EnhancedToolbar,
  //   },
  // },
});
I've commented out the only 1 I had
still the warnings
suppose I should test my use of 
sanity-typed-schema-builder


import { s } from 'sanity-typed-schema-builder';

export const schoolSchema = s.document({
  name: 'school',
  title: 'School',
  fields: [
    {
      name: 'name',
      title: 'Name',
      description: 'The name of the school',
      type: s.string(),
    },
  ],
});
I'll try using a normal schema and see if that fixes it
actually, just removed the schemas altogether and it still happens
Can you delete your node modules and package lock and try reinstalling?
Ok tried that, no luck
Are you able to reproduce? I can work on getting an example up if not
I’m not. Can you send me a zip of your repo without the node modules directory?
Here it is.
npm i
then 
npm run dev
and you should see it in your console. Might need to go to 
/studio
I've removed everything in my project except

      <NextStudio config={config}>
        <StudioProvider config={config}>
          <GlobalStyle />
          <StudioLayout />
        </StudioProvider>
      </NextStudio>
And the necessary deps to render that. The warnings remain. It must be in one of those components ^
I've narrowed it down to 
NextStudio
You’re using a hook outside of a component in 
/studio/[[…index]].tsx
createGlobalStyle
?
Yep! That’s gotta be inside of a function component.
let me try
didn't fix it 🙁
I think hooks need the prefix 
use
too. If that is a hook, someone messed up, lol
Hmm, I thought it behaved in the same way as a hook. I remember someone previously having issues with it.
I removed everything in my app except for:

import { StudioProvider } from 'sanity';
import config from 'sanity.config';

export default function StudioPage() {
  return (
    <>
      <StudioProvider config={config}>
        <div />
      </StudioProvider>
    </>
  );
}
And I get the errors. If I remove 
StudioProvider
they go away. I'm pretty sure 
StudioProvider
is the culprit
Ah! So I came across this studio start code: https://github.com/sanity-io/sanity/tree/next/dev/starter-next-studio
Turns out I don't need to use the 
next-sanity
package. I can just use the Studio component provided by sanity and get the same results, without the warnings
<Studio basePath='/studio' config={config} />
sorry, false alarm, this component is also doing it 🙁
ok here is a new zip. It is slimmed down to a single page with only the 
sanity
and 
styled-components
packages remaining:

const config = defineConfig({
  basePath: '/studio',
  name: 'default',
  projectId: 'test',
  dataset: 'test',
});

export default function Home() {
  return (
    <>
      <Studio config={config} />
    </>
  );
}

got it. Apparently a problem with 
styled-components
. Bumped it to the latest version and warnings went away 😅
Thanks for your help with this
user M
I just ran into this same issue. Happy I found this thread 🙌

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?