Sanity Studio + sanity-ui version conflict: useRootTheme() missing context

This is a classic React context error caused by having multiple versions of @sanity/ui installed in your project. The useRootTheme(): missing context value error happens when different parts of your app are using different instances of the same React context provider.

Here's how to fix it:

1. Check for duplicate installations

Run this command to see if you have multiple versions:

npm ls @sanity/ui

or if using yarn:

yarn why @sanity/ui

You'll likely see multiple versions listed - one as a direct dependency and others pulled in by sanity or @sanity/base.

2. Force a single version

The best solution is to use your package manager's resolution feature:

For npm (package.json):

{
  "overrides": {
    "@sanity/ui": "2.2.5"
  }
}

For yarn (package.json):

{
  "resolutions": {
    "@sanity/ui": "2.2.5"
  }
}

For pnpm (package.json):

{
  "pnpm": {
    "overrides": {
      "@sanity/ui": "2.2.5"
    }
  }
}

3. Clean install

After adding the resolution, do a clean reinstall:

rm -rf node_modules package-lock.json
npm install

(or the equivalent for your package manager)

4. Check your dependencies

Make sure you're not explicitly installing @sanity/ui if you don't need to. Studio v3 includes it as a dependency, so you typically don't need it listed in your package.json unless you're building custom plugins or tools that specifically need it.

The fact that it worked with 0.32.4 and base 2.1.4 but broke with 0.32.8 and base 2.2.5 suggests there was a version mismatch introduced. The resolution/override approach ensures all packages use the same version, even if their dependency ranges would normally allow different versions.

This should resolve your context error and get your Studio working again!