Sanity UI theme is crashing

This is a common issue with @sanity/ui that's typically caused by mismatched versions between your Studio and plugins. Based on the community discussion about this exact problem, here's how to fix it:

The Root Cause

When developing custom plugins, if @sanity/ui is installed as a regular dependency in your plugin (rather than a peer dependency), it can create conflicts with the version your Studio uses. This leads to theme crashes when the plugin components are rendered.

Quick Fix Steps

1. Clear everything and reinstall:

# In both your Studio and plugin directories
rm -rf node_modules package-lock.json  # or pnpm-lock.yaml if using pnpm
npm install  # or pnpm install

2. If developing a custom plugin, ensure @sanity/ui is listed as a peer dependency, not a regular dependency:

// In your plugin's package.json
{
  "peerDependencies": {
    "@sanity/ui": "^2.0.0",
    "react": "^18",
    "react-dom": "^18", 
    "styled-components": "^6.1"
  }
}

3. Make sure your Studio has the required peer dependencies installed:

npm install @sanity/ui styled-components react react-dom

If Using pnpm

If you're linking plugins with pnpm, make sure you're using pnpm link correctly. The community thread mentions this can sometimes cause issues - you might want to try using yalc instead for local plugin development.

Version Compatibility

@sanity/ui@2.0.7 should work fine with styled-components@6.1.8 - these versions are compatible according to the Sanity UI documentation.

Still Crashing?

From the community thread, the issue was eventually resolved by starting fresh with a clean project setup. If you're still stuck:

• Check your browser console for the specific error line
• Verify you're not importing @sanity/ui components that aren't being used
• Make sure your plugin's build process isn't bundling its own copy of @sanity/ui

The key takeaway: never install @sanity/ui as a regular dependency in your plugin - it should always be a peer dependency to avoid version conflicts with the Studio.