Issue with crashing theme and mismatched @sanity/ui versions in a plugin setup.
35 replies
Last updated: Feb 26, 2024
J
user F
/ui's theme is crashing?Feb 24, 2024, 12:21 AM
J
I've setup a vanilla studio in one folder. Creating a plugin in another folder.
Linking them through pnpm.
Linking them through pnpm.
Feb 24, 2024, 12:26 AM
J
Seems like a styled-compoents issue.
Updated both dependency to
6.1.8.
Updated both dependency to
6.1.8.
Feb 24, 2024, 12:27 AM
J
However, now I'm facing this:
Feb 24, 2024, 12:27 AM
J
Both package.json.
Left: vanilla studio
Right: plugin's dependencies
Left: vanilla studio
Right: plugin's dependencies
Feb 24, 2024, 12:28 AM
J
I see a mismatch of @sanity/ui versions
Feb 24, 2024, 12:28 AM
I don’t think
@sanity/uineeds 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
J
Updated vanilla studio project to use
sanity/ui@2.0.7still crashes.
Feb 24, 2024, 12:29 AM
J
Ill remove and test.
Feb 24, 2024, 12:30 AM
J
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
J
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
J
☝️ 100% believe in it.
Feb 24, 2024, 12:34 AM
J
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
J
I think I did, both the lock file and node_modules but I'll make sure. 1 moment.
Feb 24, 2024, 12:36 AM
J
Yes. Same.
Feb 24, 2024, 12:42 AM
J
I think it is something related to @sanity/ui version.
Feb 24, 2024, 12:42 AM
J
This is what I'm importing from @sanity/ui:
import {Button, Container, Flex, useToast} from '@sanity/ui'
Feb 24, 2024, 12:42 AM
J
If I comment this line: ✅
Feb 24, 2024, 12:44 AM
J
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
To confirm, you’re using both
useToastand
ToastProvider?
Feb 24, 2024, 12:48 AM
J
I'm not even using
useToast. Removing it from the code still crashes.
Feb 24, 2024, 12:48 AM
J
Thank you G.
That's ok. Thank you for trying.
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
I added the dependency back, nuked node_modules and the lock file again, and re-installed. I then ran
@sanity/uidependency, nuked node_modules and my lock file, and re-installed. When I run
npm run link-watchin my plugin directory and
npm run devin 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-watchand
npm run devagain, and the plugin is working as expected.
Feb 24, 2024, 2:51 AM
J
That's so weird...
Feb 25, 2024, 12:42 AM
J
I'm trying with a blank project (mine didn't have anything so... thats ok)
Feb 25, 2024, 12:42 AM
J
Ran
Ran
in another folder, outside of the project folder.
Folder structure is like this:
• plugins
◦ my plugin
• sanity studio vanilla
npm create sanity@latestto start a sanity studio in a folder.
Ran
npx @sanity/plugin-kit@latest init <project-name>
Folder structure is like this:
• plugins
◦ my plugin
• sanity studio vanilla
Feb 25, 2024, 12:44 AM
J
Again, im using PNPM, if that's the issue, I'll be pissed.
Feb 25, 2024, 12:44 AM
J
So far so good. Installed
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.
@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
J
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.