Sanity Studio incompatible with React 17 error after previously working

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.