Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

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
Jun 3, 2022, 5:36 PM
Hey
user T
can you provide more context about this?
Jun 3, 2022, 5:40 PM
It was working till yesterday
Jun 3, 2022, 5:43 PM
Suddenly started freaking out
Jun 3, 2022, 5:43 PM
It just warns me about React 18
Jun 3, 2022, 5:43 PM
and says to degrade
Jun 3, 2022, 5:43 PM
Please help me
user M
it's urgent I have to complete the project within few hours
Jun 3, 2022, 5:51 PM
Did you upgrade to React 18? If so, have you tried downgrading to React 17?
Jun 3, 2022, 5:52 PM
Is it necessary to downgrade
Jun 3, 2022, 5:52 PM
I mean downgrading isn't a good practice
Jun 3, 2022, 5:53 PM
user A
Do I have to degrade the whole project or only the studio directory to React 17?
Jun 3, 2022, 5:54 PM
It says invalid hook call
Jun 3, 2022, 5:57 PM
What kind of hook call am I making here?
Jun 3, 2022, 5:57 PM
I am just using default blog schema
Jun 3, 2022, 5:57 PM
It is a blog
Jun 3, 2022, 5:57 PM
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?
Jun 3, 2022, 5:58 PM
I am on React 18
Jun 3, 2022, 6:00 PM
Thank you. I suspect that’s the issue then—even on a default blog schema.
Jun 3, 2022, 6:00 PM
So I should degrade to React 17?
Jun 3, 2022, 6:01 PM
You should downgrade, yes.
Jun 3, 2022, 6:01 PM
Ok
Jun 3, 2022, 6:01 PM
Only degrade the studio or the whole project?
Jun 3, 2022, 6:02 PM
user A
Jun 3, 2022, 6:02 PM
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"
  }
}

Jun 3, 2022, 6:02 PM
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.
Jun 3, 2022, 6:04 PM
It still doesn't work
Jun 3, 2022, 6:07 PM
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.

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

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?