Sanity UI theme is crashing

35 replies

Last updated: Feb 26, 2024

user F

/ui's theme is crashing?

AI Update

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.

Show original thread

35 replies

Have you created a plugin here, or is this a vanilla Studio?

I've setup a vanilla studio in one folder. Creating a plugin in another folder.
Linking them through pnpm.

Seems like a styled-compoents issue.
Updated both dependency to
6.1.8.

@sanity/ui

installed in the plugin repo?

However, now I'm facing this:

Both package.json.
Left: vanilla studio
Right: plugin's dependencies

I see a mismatch of @sanity/ui versions

I don’t think

@sanity/ui

needs to be explicitly installed in the Studio folder. However, I would have thought both errors above would be caused by the missing dependency.

Updated vanilla studio project to use

sanity/ui@2.0.7

still crashes.

Ill remove and test.

Still crashes...

Everything else you’ve got there looks very similar to what I’m using for a setup with a linked plugin (though I’m using yalc).

I think it is related to the plugin setup. It crashes only when Studio renders a field of the schema I'm developing on the plugin's folder.

I saw that same v2 error a few days ago. I thought I resolved it by installing ui. I’ll think on it a bit.

☝️ 100% believe in it.

I think it is related to the plugin setup. It crashes only when Studio renders a field of the schema I'm developing on the plugin's folder.

☝️ 100% believe in it. All other forms are ok.

When you reinstalled, did you delete your lock file?

I think I did, both the lock file and node_modules but I'll make sure. 1 moment.

Yes. Same.

I think it is something related to @sanity/ui version.

This is what I'm importing from @sanity/ui:

import {Button, Container, Flex, useToast} from '@sanity/ui'

If I comment this line: ✅

Can I use @sanity/ui@2.0.7 with styled-components@6.1.8?

Yes, those should be compatible.
To confirm, you’re using both

useToast

and

ToastProvider

I'm not even using

useToast

. Removing it from the code still crashes.

Ah, okay.

I’ll try to reproduce a bit later. Sorry I don’t have an answer for you.

Thank you G.
That's ok. Thank you for trying.

Not sure what the issue could be here. I went in my local plugin’s package.json, removed the

@sanity/ui

dependency, nuked node_modules and my lock file, and re-installed. When I run

npm run link-watch

in my plugin directory and

npm run dev

in my Studio, I then got an error almost identical to yours (mine points at line 1180 of theme.esm.js whereas yours points at line 5534 of @sanity_ui.js?v=52c125e5). I assume that’s simply a difference in how the files are bundled.
I added the dependency back, nuked node_modules and the lock file again, and re-installed. I then ran

npm run link-watch

and

npm run dev

again, and the plugin is working as expected.

That's so weird...

I'm trying with a blank project (mine didn't have anything so... thats ok)

Ran

npm create sanity@latest

to start a sanity studio in a folder.
Ran

npx @sanity/plugin-kit@latest init <project-name>

in another folder, outside of the project folder.
Folder structure is like this:

• plugins
◦ my plugin
• sanity studio vanilla

Again, im using PNPM, if that's the issue, I'll be pissed.

So far so good. Installed

@sanity/ui

, used Container and other components... Rendered just fine.
I'll try adding styled-components to see what happens.

This is what my component has, just for testing, I might need to add more logic to it.

const QRCodeComponent = (props: ImageInputProps) => {
  return (
    <Container>
      <Flex direction={'column'} gap={5}>
        <Flex gap={3} justify={'space-between'} align={'center'}>
          <Button
            // icon={GenerateIcon}
            text="Generate QR"
            fontSize={2}
            padding={3}
            onClick={() => console.log('Button clicked')}
            style={{cursor: 'pointer'}}
            tone={'primary'}
          />
        </Flex>
      </Flex>
    </Container>
  )
}

I got it working. Don't know what happened but I got it.

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.

Get started for free Explore the demo