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.