📦 Out of the box and into your content operations: explore the Spring Release →
Get help on Discord

Error using Button component from sanity-ui in a studio plugin

38 replies
Last updated: Feb 11, 2021
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
For background: did you update recently?
Feb 11, 2021, 5:04 PM
I'm actually just starting to write this plugin haha
Feb 11, 2021, 5:04 PM
Ah, I see 🙂
Feb 11, 2021, 5:04 PM
Could you try 
rm -rf node_modules yarn.lock package-lock.json
, reinstall and run?
Feb 11, 2021, 5:04 PM
sure
Feb 11, 2021, 5:04 PM
within the plugin, studio, or both?
Feb 11, 2021, 5:05 PM
the plugin i only just kicked off a few hours ago
Feb 11, 2021, 5:05 PM
It depends on your workflow. Is the plugin in the 
plugins/
directory or an npm module?
Feb 11, 2021, 5:06 PM
in plugins
Feb 11, 2021, 5:06 PM
OK, then reinstall in the studio 🙂
Feb 11, 2021, 5:06 PM
cool ok
Feb 11, 2021, 5:07 PM
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
i've just tried swapping the button and grid component to the sanity ui one
Feb 11, 2021, 5:08 PM
no dice on the reinstall
Feb 11, 2021, 5:09 PM
Hm, which version of 
@sanity/ui
and 
@sanity/base
do you have in the package.json?
Feb 11, 2021, 5:11 PM
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
could that be wrong?
Feb 11, 2021, 5:11 PM
Ah, I see! I'll try that on my end as well
Feb 11, 2021, 5:12 PM
"@sanity/ui": "^0.33.1", in the plugin package.json
Feb 11, 2021, 5:13 PM
"@sanity/base": "^2.3.6" in the studio
Feb 11, 2021, 5:13 PM
👍
Feb 11, 2021, 5:13 PM
ooh got it
Feb 11, 2021, 5:14 PM
did a full reinstall inside the plugin folder
Feb 11, 2021, 5:15 PM
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
oh when was 0.33.1 released?
Feb 11, 2021, 5:16 PM
actually at 5 hours ago?
Feb 11, 2021, 5:16 PM
Anyhow, thanks!
Feb 11, 2021, 5:21 PM
Ah, sweet!
Feb 11, 2021, 5:24 PM
My next question already though... the buttons styling seems quite... off... any idea why that might be?
Feb 11, 2021, 5:24 PM
It was released earlier today 🙂
Feb 11, 2021, 5:24 PM
Nice timing then 😄
Feb 11, 2021, 5:25 PM
Can you share a screenshot?
Feb 11, 2021, 5:25 PM
Ah, that's a quirk with 
@sanity/ui
.
Try this:


<Button text="Add row" />
<Button text="Add column" />
<Button text="Clear" />
Fwiw, the reason is that you can use the button to make custom buttons:


<Button>
  <Flex align="center" padding={3}>
    <Avatar />
    <Text>Someone</Text>
  </Flex>
</Box>
Feb 11, 2021, 5:27 PM
ah makes sense
Feb 11, 2021, 5:28 PM
ok i'll pay closer attention to the docs too haha
Feb 11, 2021, 5:29 PM
thanks a lot!
Feb 11, 2021, 5:29 PM
And with 
<Grid gap={1}>
you may get some space in there 🙂
Feb 11, 2021, 5:29 PM
No probs!
Feb 11, 2021, 5:29 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.

Get started for freeExplore the demo

Was this answer helpful?