Get help on Discord

Troubleshooting error running Sanity Studio with React 17

30 replies
Last updated: Jul 7, 2022
I'm getting an error when trying to run sanity studio (was working a few days ago just fine)
It is telling me sanity is incompatible with react 17, but it was working fine with it before today?

Any ideas?
AI Update

This is almost certainly due to a dependency update in your project. Sanity Studio v3 (released January 2023) and later versions require React 18, so if your project was previously working with React 17, something has changed in your dependencies.

Here are the most likely causes and solutions:

What probably happened

  1. A dependency update triggered the issue - Even if you didn't manually update Sanity, running npm install or yarn install might have updated the sanity package (or one of its dependencies) to a newer version that enforces the React 18 peer dependency more strictly.

  2. Package manager resolved dependencies differently - Sometimes npm/yarn can resolve dependencies differently on subsequent installs, especially if you don't have a lockfile committed or if it was regenerated.

How to fix it

Option 1: Upgrade to React 18 (Recommended)

React 18 has been stable since March 2022, and upgrading is usually straightforward:

npm install react@latest react-dom@latest
# or
yarn add react@latest react-dom@latest

Most projects upgrade without issues, but test your application thoroughly afterward.

Option 2: Pin Sanity to an older version temporarily

If you can't upgrade React right now, you can pin Sanity to a version that was working before:

npm install sanity@3.x.x react@17 react-dom@17

Check your package-lock.json or yarn.lock to see what version you had before.

Option 3: Use npm legacy peer deps flag (Not recommended long-term)

You can bypass the peer dependency check:

npm install --legacy-peer-deps

Or add this to your .npmrc file:

legacy-peer-deps=true

However, this is just masking the issue and could lead to runtime problems.

Why this changed

Sanity Studio v3 requires React 18 as a fundamental dependency. If your project was working with React 17 before, you were likely on an older version that had looser peer dependency requirements, or your package manager was ignoring the warnings.

The React 18 requirement enables modern React features like concurrent rendering and better server-side rendering capabilities that Sanity Studio uses internally. Upgrading to React 18 is the best path forward for compatibility with current and future Sanity features.

Have you tried nuking your node modules and reinstalling properly?
I did sudo rm -rf node_modules
Then I did sanity install

This should be the correct way to nuke and reinstall yeah?
I would also delete your build directory (default ./dist) and if you are still having issues delete your lock file. (package-lock.json or yarn.lock). Yarn has typically worked best with v2, but npm should work too - pnpm has been hit or miss for me.

rm -rf dist
rm -rf node_modules
rm package-lock.json
rm yarn.lock
# v3 installs currently 
rm -rf .sanity && rm -rf runtime
if you’ve updated node recently, check or reinstall sanity cli

npm install -g @sanity/cli
then run install again

sanity install
, 
yarn
, or 
npm install
This is just a bit of housecleaning and very typical for any node environment as sometimes node and package mgr installs update themselves and break stuff.
You may also want to try a tool like codesandbox or gitpod to see if you can make it work there to isolate a local env issue.
Thank you so much! I will test all of this when I get home. Now I just want to make sure, this won't make me lose my boosted free plan I currently have on my project?
user U
Always branch and make sure you have a good backup whenever deleting stuff.
But changes you make to your studio and schemas will not affect your dataset (unless you’re running a script). You could delete every schema you have and the data would still exist just as before, for typical use cases. The studio is just a window to your dataset. So, as long as you have a copy of your previous working studio somewhere, you should be able to recover access. And this certainly will not affect your plan. Just be sure to re-use the same projectId
If you’ve somehow lost your boosted plan, DM me with your projectId and I’ll see if this can be recovered.
Great, thank you for the thorough explanation! I really appreciate. I'll try these steps when I get home later and tag you if it doesn't fix the issue
user U
hey do i run the commands in the main repo or inside the sanity folder?
you do it in your sanity studio root directory, but clearing the build directory (not always dist), node modules, and sometimes your lock file in your dev environment are very typical troubleshooting steps for any nodejs project when you don’t get clear errors in console or with your ide tools
modules and build directories should not be synced to your git repo and should be compiled each time you run your app on a new environment/computer. So your server environment is going to create a unique directory for modules and build, as will your local dev environment typically. Modules will always be compiled for your local environment and can vary a good bit depending on your OS and hardware.
if you have accidentally synced your node_modules directory to your git repo, try this to clean them out
git rm -r --cached node_modules
# along with...
git rm -r node_modules
commit then push and merge, then check your repo to make sure they’re properly nuked
still run those from the sanity root directory?
because i think i did accidentally do that lol
along with this make sure that 
.gitignore
has been added to your root directory and contains a line with 
node_modules
in it.
here’s an example gitignore file content that should be good for v2 and v3, js or ts:

# See <https://help.github.com/articles/ignoring-files/> for more about ignoring files.

# Dependencies
/node_modules
/.pnp
.pnp.js

# Compiled Sanity Studio
/dist

# Temporary Sanity runtime, generated by the CLI on every dev server start
/.sanity

# Logs
/logs
*.log

# Coverage directory used by testing tools
/coverage

# Misc
.DS_Store
*.pem

# Typescript
*.tsbuildinfo
.vercel
i didn't have a slash in front f the node modules would have made a difference
I’m not 100% about the slash, you may want to google this to be sure. The directories I suggested you delete and rebuild are in your sanity studio folder, but most frameworks are similar. You can even put your build files in a custom directory, often for some custom deployments you may need to put your build dir in a custom place. You can add this to your 
package.json
scripts to do this:
 "scripts": {
    ...
    "build": "sanity build --output public -y",
  },
you can get more info on build options with the sanity cli:
sanity build --h
again, this may not fix your issue but it is a very typical troubleshooting step. And you should never sync node_modules to your repo
AT YOUR OWN RISK
Here is a quick walkthrough for setting up a global gitignore file. Note that some IDEs will ignore this if you’re using their gui.

https://sebastiandedeyne.com/setting-up-a-global-gitignore-file/
can i have a git ignore inside both my main directory and the sanity directory?
thats what I have currently
ok i am thoroughly confused lol, i deleted lock files, i tried all of the steps in the order you listed and I am now seeing
node
:internal/modules/cjs/loader:936 throw err;
^

Error: Cannot find module '/home/louby/repos/naileditbykait/naileditbykait/sanity_naileditbykait/...'
at Function.Module._resolveFilename (node
:internal/modules/cjs/loader:933:15) at Function.Module._load (node
:internal/modules/cjs/loader:778:27) at Function.executeUserEntryPoint [as runMain] (node
:internal/modules/run_main:77:12) at node
:internal/main/run_main_module:17:47 { code: 'MODULE_NOT_FOUND',
requireStack: []
}
is there an easy way to just delete the studio and deploy a new one? or is it an issue deeper than just the studio?
or is it possibly the new studo v3 that is messing me up?
you can add gitignore files in each sub-project directory if you’d like. I’d suggest doing some further research on this.
Is this a v3 studio or v2? it looks like your node modules aren’t installed. Be sure you’re running your commands within the proper directory.
I double checked i have been using v3 I got confused. Can you advise on how to correct the node modules issue?
ummm try this (assuming yarn package manager)1. 
cd repos && git clone [github repo url && cd repodirname
2. if your studio is in a sub directory, 
cd studiodir
3. 
yarn
4. 
yarn start
I'm assuming npm is similar just replace yarn? Do npm install on step 3?
Or would this just be a good time to switch to yarn instead

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?