Error using Button component from sanity-ui in a studio plugin
38 replies
Last updated: Feb 11, 2021
C
Hi, I'm trying to use the Button component from sanity-ui in a studio plugin, but I"m getting this error:
TypeError: Cannot destructure property 'media' of 'theme.sanity' as it is undefined. at responsiveRadiusStyle (/studio/static/js/app.bundle.js:345740:13) at Ne (/studio/static/js/app.bundle.js:334335:14863) at e.generateAndInjectStyles (/studio/static/js/app.bundle.js:334335:11304) at <http://localhost:3333/studio/static/js/app.bundle.js:334335:19082> at <http://localhost:3333/studio/static/js/app.bundle.js:334335:19257> at styled.button (/studio/static/js/app.bundle.js:334335:19848) at renderWithHooks (/studio/static/js/vendor.bundle.js:17945:18) at updateForwardRef (/studio/static/js/vendor.bundle.js:19958:20) at beginWork (/studio/static/js/vendor.bundle.js:21787:16) at HTMLUnknownElement.callCallback (/studio/static/js/vendor.bundle.js:3330:14)
Feb 11, 2021, 4:54 PM
M
For background: did you update recently?
Feb 11, 2021, 5:04 PM
C
I'm actually just starting to write this plugin haha
Feb 11, 2021, 5:04 PM
M
Ah, I see π
Feb 11, 2021, 5:04 PM
M
Could you try
rm -rf node_modules yarn.lock package-lock.json, reinstall and run?
Feb 11, 2021, 5:04 PM
C
sure
Feb 11, 2021, 5:04 PM
C
within the plugin, studio, or both?
Feb 11, 2021, 5:05 PM
C
the plugin i only just kicked off a few hours ago
Feb 11, 2021, 5:05 PM
M
It depends on your workflow. Is the plugin in the
plugins/directory or an npm module?
Feb 11, 2021, 5:06 PM
C
in plugins
Feb 11, 2021, 5:06 PM
M
OK, then reinstall in the studio π
Feb 11, 2021, 5:06 PM
C
cool ok
Feb 11, 2021, 5:07 PM
C
the plugin is actually forking from a non-sanity-ui-based plugin, i'm not sure if thats a factor
Feb 11, 2021, 5:08 PM
C
i've just tried swapping the button and grid component to the sanity ui one
Feb 11, 2021, 5:08 PM
C
no dice on the reinstall
Feb 11, 2021, 5:09 PM
M
Hm, which version of
@sanity/uiand
@sanity/basedo you have in the package.json?
Feb 11, 2021, 5:11 PM
C
the plugin i actually set up using sanistrap though, so it has its own package.json and node_modules, even inside the plugins folder
Feb 11, 2021, 5:11 PM
C
could that be wrong?
Feb 11, 2021, 5:11 PM
M
Ah, I see! I'll try that on my end as well
Feb 11, 2021, 5:12 PM
C
"@sanity/ui": "^0.33.1", in the plugin package.json
Feb 11, 2021, 5:13 PM
C
"@sanity/base": "^2.3.6" in the studio
Feb 11, 2021, 5:13 PM
M
π
Feb 11, 2021, 5:13 PM
C
ooh got it
Feb 11, 2021, 5:14 PM
C
did a full reinstall inside the plugin folder
Feb 11, 2021, 5:15 PM
C
not sure why it made a difference given i only just created hte plugin a few hours ago haha
Feb 11, 2021, 5:15 PM
C
oh when was 0.33.1 released?
Feb 11, 2021, 5:16 PM
C
actually at 5 hours ago?
Feb 11, 2021, 5:16 PM
C
Anyhow, thanks!
Feb 11, 2021, 5:21 PM
M
Ah, sweet!
Feb 11, 2021, 5:24 PM
C
My next question already though... the buttons styling seems quite... off... any idea why that might be?
Feb 11, 2021, 5:24 PM
M
It was released earlier today π
Feb 11, 2021, 5:24 PM
C
Nice timing then π
Feb 11, 2021, 5:25 PM
M
Can you share a screenshot?
Feb 11, 2021, 5:25 PM
M
Ah, that's a quirk with
Try this:
Fwiw, the reason is that you can use the button to make custom buttons:
@sanity/ui.
Try this:
<Button text="Add row" /> <Button text="Add column" /> <Button text="Clear" />
<Button> <Flex align="center" padding={3}> <Avatar /> <Text>Someone</Text> </Flex> </Box>
Feb 11, 2021, 5:27 PM
C
ah makes sense
Feb 11, 2021, 5:28 PM
C
ok i'll pay closer attention to the docs too haha
Feb 11, 2021, 5:29 PM
C
thanks a lot!
Feb 11, 2021, 5:29 PM
M
And with
<Grid gap={1}>you may get some space in there π
Feb 11, 2021, 5:29 PM
M
No probs!
Feb 11, 2021, 5:29 PM
Sanityβ build remarkable experiences at scale
The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.