Get help on Discord

React 18 causing invalid hook call error, downgrading to React 17 and wiping node_modules resolves issue

33 replies
Last updated: Jun 3, 2022
Sanity is freaking out
AI Update

I understand you're having issues with Sanity! Since "freaking out" could mean a lot of different things, let me help you troubleshoot. Here are the most common issues and how to fix them:

If Studio won't start or crashes:

  • Check that you're using Node.js 20+ (Studio v4 requires this)
  • Try deleting node_modules and .sanity folders, then run npm install again
  • Clear your browser cache and try in an incognito window
  • Check the browser console (F12) for specific error messages

If you're seeing API or query errors:

  • Recent API changes (v2025-02-19) changed the default perspective to published instead of raw - this might affect what content you see
  • If using TypeScript, queries now need the defineQuery wrapper for type generation
  • Check your CORS settings in your project's API settings if you're getting CORS errors

If content isn't appearing or syncing:

  • Make sure documents are actually published (not just drafts)
  • Check if you're using the correct dataset name
  • Verify your API token has the right permissions if using one

If you're using Next.js 15:

  • Route params are now Promises - you need to await params.slug instead of accessing params.slug directly

To get specific help:

If you can share the specific error message you're seeing (from the console or terminal), I can give you much more targeted help! What exactly is happening when Sanity "freaks out"?

Hey
user T
can you provide more context about this?
It was working till yesterday
Suddenly started freaking out
It just warns me about React 18
and says to degrade
Please help me
user M
it's urgent I have to complete the project within few hours
Did you upgrade to React 18? If so, have you tried downgrading to React 17?
Is it necessary to downgrade
I mean downgrading isn't a good practice
user A
Do I have to degrade the whole project or only the studio directory to React 17?
It says invalid hook call
What kind of hook call am I making here?
I am just using default blog schema
It is a blog
The studio hasn’t been tested against React 18 yet, which is why it’s pegged at version 17. Can you first confirm whether or not you’re on React 18?
I am on React 18
Thank you. I suspect that’s the issue then—even on a default blog schema.
So I should degrade to React 17?
You should downgrade, yes.
Ok
Only degrade the studio or the whole project?
user A
My package.json
{
  "name": "knutmelvaerno",
  "private": true,
  "version": "2.0.0",
  "description": "",
  "main": "package.json",
  "author": "Knut Melvær <knut.melvaer@gmail.com>",
  "license": "MIT",
  "scripts": {
    "start": "sanity start",
    "test": "sanity check"
  },
  "keywords": [
    "sanity"
  ],
  "dependencies": {
    "@sanity/base": "^2.30.1",
    "@sanity/components": "^2.14.0",
    "@sanity/core": "^2.30.1",
    "@sanity/default-layout": "^2.30.1",
    "@sanity/default-login": "^2.30.1",
    "@sanity/desk-tool": "^2.30.1",
    "prop-types": "^15.8.1",
    "react": "17.0.0",
    "sanity": "^2.29.3",
    "styled-components": "^5.3.5"
  }
}

I can’t speak to your front end and whether it’ll work with React 18, but you’d want to revert your studio at the very least.
It still doesn't work
Error: 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
See <https://reactjs.org/link/invalid-hook-call> for tips about how to debug and fix this problem.

user A
I reverted everything to React 17
Doesn't work
Did you wipe your node_modules and re-install? You could have multiple versions of React still (reason 3 in the error).
Ok doing it
Works now
Thanks a lot

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?