-
Notifications
You must be signed in to change notification settings - Fork 1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Unable to use Adobe's React Spectrum package with Astro #5401
Comments
Hey, You'll need to add the following in the This is mentioned for Next.js in the docs but the same thing applies here since these modules need to be transpiled for you. noExternal: [
'@adobe/react-spectrum',
'@react-spectrum/actionbar',
'@react-spectrum/actiongroup',
'@react-spectrum/avatar',
'@react-spectrum/badge',
'@react-spectrum/breadcrumbs',
'@react-spectrum/button',
'@react-spectrum/buttongroup',
'@react-spectrum/calendar',
'@react-spectrum/checkbox',
'@react-spectrum/combobox',
'@react-spectrum/contextualhelp',
'@react-spectrum/datepicker',
'@react-spectrum/dialog',
'@react-spectrum/divider',
'@react-spectrum/dnd',
'@react-spectrum/form',
'@react-spectrum/icon',
'@react-spectrum/illustratedmessage',
'@react-spectrum/inlinealert',
'@react-spectrum/image',
'@react-spectrum/label',
'@react-spectrum/labeledvalue',
'@react-spectrum/layout',
'@react-spectrum/link',
'@react-spectrum/list',
'@react-spectrum/listbox',
'@react-spectrum/menu',
'@react-spectrum/meter',
'@react-spectrum/numberfield',
'@react-spectrum/overlays',
'@react-spectrum/picker',
'@react-spectrum/progress',
'@react-spectrum/provider',
'@react-spectrum/radio',
'@react-spectrum/slider',
'@react-spectrum/searchfield',
'@react-spectrum/statuslight',
'@react-spectrum/switch',
'@react-spectrum/table',
'@react-spectrum/tabs',
'@react-spectrum/tag',
'@react-spectrum/text',
'@react-spectrum/textfield',
'@react-spectrum/theme-dark',
'@react-spectrum/theme-default',
'@react-spectrum/theme-light',
'@react-spectrum/tooltip',
'@react-spectrum/view',
'@react-spectrum/well',
'@spectrum-icons/illustrations',
'@spectrum-icons/ui',
'@spectrum-icons/workflow',
], If it still breaks, lmk :D |
For me it worx 🥳 thanks a lot for looking into it @barelyhuman |
I reproduced the same issue with the experimental Remix on Vite (v2.3.1). Also, let's note that regular expressions do not work, we have to provide a static list. Thank you for the solution barelyhuman |
Confirmed that @barelyhuman's solution worked for me when using Remix w/ Vite as well. |
@barelyhuman not working for me, I'm getting this error: module is not defined Just that in my console |
This is still an issue. Setting all the above in noExternal I am still getting |
any chance you can post a reproduction of just that ? |
@barelyhuman yes. Please find below: It seems that for others works (e.g. breadcrumbs) but not for icons... To be honest I am not experienced in Astro so might be something I am doing wrong... When build and preview though i can see the button but nothing happens on click (maybe that's irrelevant) Thank you in advance |
Astro handles CSS a little bit differently considering most of the handling is done by their plugin container. You'll have better luck asking in their discussion channel. I'll have a look at it anyway, and ping back if I do end up finding a workaround |
Thanks, just for reference I open an issue at withastro/astro#10926 |
OK, the above link gives the solution. Any ideas how to embrace / wrap my app with in Astro is more than welcome |
Provide a general summary of the issue here
I'm unable to use Adobe's React Spectrum package with Astro.
🤔 Expected Behavior?
I should be able to use components from
react-spectrum
with Astro.😯 Current Behavior
The application crashes and I get this error:
Following the error's directions (adding
@adobe/react-spectrum
tovite.ssr.noExternal
) doesn't fix the issue.💁 Possible Solution
No response
🔦 Context
No response
🖥️ Steps to Reproduce
It's easy to reproduce. Just add a Spectrum component to a page:
https://stackblitz.com/edit/withastro-astro-wfi4ll?file=src%2Fpages%2Findex.astro
Version
3.32.0
What browsers are you seeing the problem on?
Firefox, Chrome, Safari
If other, please specify.
No response
What operating system are you using?
macOS
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
The text was updated successfully, but these errors were encountered: