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:


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


&lt;Button&gt;
  &lt;Flex align="center" padding={3}&gt;
    &lt;Avatar /&gt;
    &lt;Text&gt;Someone&lt;/Text&gt;
  &lt;/Flex&gt;
&lt;/Box&gt;
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
&lt;Grid gap={1}&gt;
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

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.

Was this answer helpful?

Categorized in