✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

Issue with crashing theme and mismatched @sanity/ui versions in a plugin setup.

35 replies
Last updated: Feb 26, 2024
user F
/ui's theme is crashing?
Feb 24, 2024, 12:21 AM
Have you created a plugin here, or is this a vanilla Studio?
Feb 24, 2024, 12:26 AM
I've setup a vanilla studio in one folder. Creating a plugin in another folder.
Linking them through pnpm.
Feb 24, 2024, 12:26 AM
Seems like a styled-compoents issue.
Updated both dependency to
6.1.8.
Feb 24, 2024, 12:27 AM
Is
@sanity/ui
installed in the plugin repo?
Feb 24, 2024, 12:27 AM
However, now I'm facing this:
Feb 24, 2024, 12:27 AM
Both package.json.
Left: vanilla studio
Right: plugin's dependencies
Feb 24, 2024, 12:28 AM
I see a mismatch of @sanity/ui versions
Feb 24, 2024, 12:28 AM
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.
Feb 24, 2024, 12:29 AM
Updated vanilla studio project to use
sanity/ui@2.0.7
still crashes.
Feb 24, 2024, 12:29 AM
Ill remove and test.
Feb 24, 2024, 12:30 AM
Still crashes...
Feb 24, 2024, 12:31 AM
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).
Feb 24, 2024, 12:32 AM
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.
Feb 24, 2024, 12:32 AM
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.
Feb 24, 2024, 12:34 AM
☝️ 100% believe in it.
Feb 24, 2024, 12:34 AM
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.
Feb 24, 2024, 12:34 AM
When you reinstalled, did you delete your lock file?
Feb 24, 2024, 12:36 AM
I think I did, both the lock file and node_modules but I'll make sure. 1 moment.
Feb 24, 2024, 12:36 AM
Yes. Same.
Feb 24, 2024, 12:42 AM
I think it is something related to @sanity/ui version.
Feb 24, 2024, 12:42 AM
This is what I'm importing from @sanity/ui:

import {Button, Container, Flex, useToast} from '@sanity/ui'
Feb 24, 2024, 12:42 AM
If I comment this line:
Feb 24, 2024, 12:44 AM
Can I use @sanity/ui@2.0.7 with styled-components@6.1.8?
Feb 24, 2024, 12:44 AM
Yes, those should be compatible.
To confirm, you’re using both
useToast
and
ToastProvider
?
Feb 24, 2024, 12:48 AM
I'm not even using
useToast
. Removing it from the code still crashes.
Feb 24, 2024, 12:48 AM
Ah, okay.
Feb 24, 2024, 12:48 AM
I’ll try to reproduce a bit later. Sorry I don’t have an answer for you.
Feb 24, 2024, 12:49 AM
Thank you G.
That's ok. Thank you for trying.
Feb 24, 2024, 12:49 AM
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.
Feb 24, 2024, 2:51 AM
That's so weird...
Feb 25, 2024, 12:42 AM
I'm trying with a blank project (mine didn't have anything so... thats ok)
Feb 25, 2024, 12:42 AM
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
Feb 25, 2024, 12:44 AM
Again, im using PNPM, if that's the issue, I'll be pissed.
Feb 25, 2024, 12:44 AM
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>
  )
}
Feb 25, 2024, 1:03 AM
I got it working. Don't know what happened but I got it.
Feb 26, 2024, 12:03 PM

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.

Was this answer helpful?