Open kee-oth opened 10 months ago
Hey,
You'll need to add the following in the noExternal
property as well. @adobe/react-spectrum
is an umbrella package for the remaining @react-spectrum
packages.
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
Unknown file extension ".css" for /Users/itsam/devel/react/fms-astro/node_modules/@react-spectrum/icon/dist/main.css
any chance you can post a reproduction of just that ?
@barelyhuman yes. Please find below: https://stackblitz.com/edit/withastro-astro-mqctjo?file=astro.config.mjs
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
@barelyhuman yes. Please find below: https://stackblitz.com/edit/withastro-astro-mqctjo?file=astro.config.mjs
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 https://github.com/withastro/astro/issues/10926
OK, the above link gives the solution. Any ideas how to embrace / wrap my app with
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