Discussion of React version compatibility issues in a monorepo with workspaces and solution using Yarn v3

30 replies
Last updated: Oct 4, 2022
Hi, I wonder if anyone experienced the same issue? I can not recall when exactly it appeared but the last 2 days I could not run the studio. I have reinstalled node_modules but it has not solved the issue.
AI Update

I'd be happy to help you troubleshoot! Since you haven't mentioned the specific error message, I'll cover the most common issues that prevent Sanity Studio from starting:

Check Your Node.js Version

The most common issue lately is Node.js version compatibility. Sanity Studio v4 requires Node.js version 20 or higher. Check your version by running:

node -v

If you're on Node.js 18 or lower, you'll need to upgrade. Node.js 18 reached end-of-life in April 2024, which is why Studio v4 bumped the requirement.

Common Solutions

After checking your Node version, try these steps:

  1. Clear npm cache and reinstall:

    rm -rf node_modules
    npm cache clean --force
    npm install
  2. Clear Sanity cache:

    rm -rf .sanity
    npm run dev
  3. Update Sanity packages:

    npm update sanity @sanity/vision
  4. Check for port conflicts: If port 3333 is already in use, you might get startup errors. Try specifying a different port:

    npx sanity dev --port 3334

What Error Are You Seeing?

If none of these work, the specific error message would help narrow down the issue. Common errors include:

  • Build errors (often dependency-related)
  • Port conflicts
  • Schema validation errors
  • Authentication issues

If you can share the error message you're getting when you try to start the studio, that would help identify the exact problem. Also, if you're using a package manager like yarn or pnpm instead of npm, let us know as the commands would be slightly different.

if relevant - I have the
"react": "^18.2.0"
Is this React version in the Sanity project or yours?
both
Hi
user F
, in sanity proj I use react 18 as peerDependencies
Are you using v2 or v3?
@sanity/cli version 2.31.0
So in my v2 Sanity project, I have React as a dependency, not a peer dep, and it’s v17. 😄
I get the following when running the studio but it was not an issue before 🙂
Right. I think this is the situation.
Yes, but it was not breaking any functionalities before for me. Same here: https://github.com/sanity-io/sanity/issues/3456
Can you install it as a main dep instead of peer?
yes yes ☺️ i’m on it
i did so but it did not fix the problem
now i downgraded to react 17 and it fixed the problem
it’s strange because before i could run it with react 18 even though i had the warnings
Fair enough. 😅
Thank you for the help,
user F
☺️☺️
Maybe it cam with the latest sanity update to v2.31idk
☺️
looking forward to sanity to support react 18 🙂
Re: React 17/18 issues in SanityIf you’re still dealing with these kind of issues in a monorepo with workspaces, one of my super duper smart colleagues found a solution that works with yarn v3.


"installConfig": {
    "hoistingLimits": "workspaces"
  },
This way I can have react 18 in my nextjs app and keep sanity on 17!
Thank you for this,
user E
! Any ideas on how to pull this off with Lerna / Turborepo?
I don’t think lerna/turborepo should have an influence on this, as that’s more about concurrency,scripts execution and not really hoisting/installing packages I believe?
Matter of fact, the project I used as an example is a turborepo monorepo!
So it’s just a matter of adding the above and installing with Yarn? 😄
Which Yarn version are y’all using?
root
package.json
looks like this

{
  "name": "root-name",
  "private": true,
  "workspaces": [
    "apps/*",
    "packages/*"
  ],
  "scripts": {
    "build": "turbo run build",
    "dev": "turbo run dev --parallel",
    "lint": "turbo run lint",
    "clean": "turbo run clean --parallel",
    "format": "turbo run format --parallel",
    "type-check": "turbo run type-check"
  },
  "devDependencies": {
    "@types/prettier": "^2.7.0",
    "prettier": "^2.7.1",
    "rimraf": "^3.0.2",
    "turbo": "^1.4.3"
  },
  "packageManager": "yarn@3.2.0"
}
Running on node 16.17.0 with asdf and yarn on 3.2.0
and then in
apps/cms/package.json
we’ve got this

{
  "name": "cms-name",
  "installConfig": {
    "hoistingLimits": "workspaces"
  },
  "scripts": {
    "dev": "sanity start",
    "start": "sanity start",
    "test": "sanity check",
    "build": "sanity build dist -y",
    "clean": "rimraf .turbo && rimraf node_modules && rimraf dist",
  },
  ...deps and devdeps here
}
and last but not least, in the root we have
.yarnrc.yml
looking like this

nodeLinker: node-modules

plugins:
  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
    spec: '@yarnpkg/plugin-interactive-tools'
  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
    spec: '@yarnpkg/plugin-typescript'
  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
    spec: '@yarnpkg/plugin-workspace-tools'

yarnPath: .yarn/releases/yarn-3.2.0.cjs

Thanks a ton, Jan - I managed to get it working 🎉
Ahh great mate! I know the frustration so I can imagine the relieve you have right now 😄!

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.

Was this answer helpful?