Troubleshooting "Invalid hook call" warnings in Sanity Studio console

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?
Apr 12, 2023, 2:36 AM
Do you have any custom React in your Studio?
Apr 12, 2023, 4:36 PM
I do not
Apr 12, 2023, 4:37 PM
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,
  //   },
  // },
});
Apr 12, 2023, 4:37 PM
I've commented out the only 1 I had
Apr 12, 2023, 4:38 PM
still the warnings
Apr 12, 2023, 4:38 PM
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
Apr 12, 2023, 4:40 PM
actually, just removed the schemas altogether and it still happens
Apr 12, 2023, 4:42 PM
Can you delete your node modules and package lock and try reinstalling?
Apr 12, 2023, 4:48 PM
Ok tried that, no luck
Apr 12, 2023, 4:49 PM
Are you able to reproduce? I can work on getting an example up if not
Apr 12, 2023, 6:04 PM
I’m not. Can you send me a zip of your repo without the node modules directory?
Apr 12, 2023, 6:07 PM
Here it is.
npm i
then
npm run dev
and you should see it in your console. Might need to go to
/studio
Apr 12, 2023, 7:02 PM
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 ^
Apr 12, 2023, 9:14 PM
I've narrowed it down to
NextStudio
Apr 12, 2023, 9:17 PM
You’re using a hook outside of a component in
/studio/[[…index]].tsx
Apr 12, 2023, 9:35 PM
createGlobalStyle
?
Apr 12, 2023, 9:37 PM
Yep! That’s gotta be inside of a function component.
Apr 12, 2023, 9:42 PM
let me try
Apr 12, 2023, 9:43 PM
didn't fix it 🙁
Apr 12, 2023, 9:44 PM
I think hooks need the prefix
use
too. If that is a hook, someone messed up, lol
Apr 12, 2023, 9:45 PM
Hmm, I thought it behaved in the same way as a hook. I remember someone previously having issues with it.
Apr 12, 2023, 10:05 PM
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
Apr 13, 2023, 1:07 AM
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} />
Apr 13, 2023, 2:20 PM
sorry, false alarm, this component is also doing it 🙁
Apr 13, 2023, 3:26 PM
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} />
    </>
  );
}

Apr 13, 2023, 3:56 PM
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
Apr 13, 2023, 4:04 PM
I just ran into this same issue. Happy I found this thread 🙌
May 25, 2023, 2:37 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?

Categorized in