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

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.
Aug 25, 2022, 10:52 AM
if relevant - I have the 
"react": "^18.2.0"
Aug 25, 2022, 10:54 AM
Is this React version in the Sanity project or yours?
Aug 25, 2022, 10:57 AM
both
Aug 25, 2022, 10:57 AM
Hi
user F
, in sanity proj I use react 18 as peerDependencies
Aug 25, 2022, 10:58 AM
Are you using v2 or v3?
Aug 25, 2022, 10:59 AM
@sanity/cli version 2.31.0
Aug 25, 2022, 11:01 AM
So in my v2 Sanity project, I have React as a dependency, not a peer dep, and it’s v17. 😄
Aug 25, 2022, 11:02 AM
I get the following when running the studio but it was not an issue before 🙂
Aug 25, 2022, 11:02 AM
Right. I think this is the situation.
Aug 25, 2022, 11:03 AM
Yes, but it was not breaking any functionalities before for me. Same here: https://github.com/sanity-io/sanity/issues/3456
Aug 25, 2022, 11:05 AM
Can you install it as a main dep instead of peer?
Aug 25, 2022, 11:07 AM
yes yes ☺️ i’m on it
Aug 25, 2022, 11:07 AM
i did so but it did not fix the problem
Aug 25, 2022, 11:07 AM
now i downgraded to react 17 and it fixed the problem
Aug 25, 2022, 11:08 AM
it’s strange because before i could run it with react 18 even though i had the warnings
Aug 25, 2022, 11:08 AM
Fair enough. 😅
Aug 25, 2022, 11:09 AM
Thank you for the help,
user F
☺️☺️
Aug 25, 2022, 11:09 AM
Maybe it cam with the latest sanity update to v2.31idk
☺️
Aug 25, 2022, 11:09 AM
looking forward to sanity to support react 18 🙂
Aug 25, 2022, 11:10 AM
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!
Sep 8, 2022, 9:42 AM
Thank you for this,
user E
! Any ideas on how to pull this off with Lerna / Turborepo?
Sep 26, 2022, 12:26 PM
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?
Sep 26, 2022, 1:09 PM
Matter of fact, the project I used as an example is a turborepo monorepo!
Sep 26, 2022, 1:10 PM
So it’s just a matter of adding the above and installing with Yarn? 😄
Which Yarn version are y’all using?
Sep 26, 2022, 1:12 PM
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"
}
Sep 27, 2022, 8:23 AM
Running on node 16.17.0 with asdf and yarn on 3.2.0
Sep 27, 2022, 8:23 AM
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
}
Sep 27, 2022, 8:25 AM
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

Sep 27, 2022, 8:26 AM
Thanks a ton, Jan - I managed to get it working 🎉
Oct 3, 2022, 12:05 PM
Ahh great mate! I know the frustration so I can imagine the relieve you have right now 😄!
Oct 4, 2022, 8:12 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.

Get started for freeExplore the demo

Was this answer helpful?