✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

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?
Jul 6, 2022, 1:50 PM
Have you tried nuking your node modules and reinstalling properly?
Jul 6, 2022, 2:57 PM
I did sudo rm -rf node_modules
Then I did sanity install

This should be the correct way to nuke and reinstall yeah?
Jul 6, 2022, 3:01 PM
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
Jul 6, 2022, 3:46 PM
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.
Jul 6, 2022, 3:47 PM
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
Jul 6, 2022, 3:49 PM
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
Jul 6, 2022, 3:52 PM
If you’ve somehow lost your boosted plan, DM me with your projectId and I’ll see if this can be recovered.
Jul 6, 2022, 3:53 PM
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
Jul 6, 2022, 3:55 PM
user U
hey do i run the commands in the main repo or inside the sanity folder?
Jul 6, 2022, 10:12 PM
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
Jul 6, 2022, 10:17 PM
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.
Jul 6, 2022, 10:19 PM
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
Jul 6, 2022, 10:21 PM
still run those from the sanity root directory?
Jul 6, 2022, 10:22 PM
because i think i did accidentally do that lol
Jul 6, 2022, 10:22 PM
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
Jul 6, 2022, 10:23 PM
i didn't have a slash in front f the node modules would have made a difference
Jul 6, 2022, 10:24 PM
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",
  },
Jul 6, 2022, 10:26 PM
you can get more info on build options with the sanity cli:
sanity build --h
Jul 6, 2022, 10:27 PM
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
Jul 6, 2022, 10:27 PM
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/
Jul 6, 2022, 10:30 PM
can i have a git ignore inside both my main directory and the sanity directory?
Jul 6, 2022, 10:37 PM
thats what I have currently
Jul 6, 2022, 10:37 PM
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: []
}
Jul 6, 2022, 10:54 PM
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?
Jul 6, 2022, 10:56 PM
or is it possibly the new studo v3 that is messing me up?
Jul 6, 2022, 10:58 PM
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.
Jul 6, 2022, 11:48 PM
I double checked i have been using v3 I got confused. Can you advise on how to correct the node modules issue?
Jul 6, 2022, 11:54 PM
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
Jul 7, 2022, 12:03 AM
I'm assuming npm is similar just replace yarn? Do npm install on step 3?
Jul 7, 2022, 12:05 AM
Or would this just be a good time to switch to yarn instead
Jul 7, 2022, 12:05 AM

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.

Was this answer helpful?