Unable to use Adobe's React Spectrum package with Astro

[kee-oth]

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:

Unknown file extension ".css" for /home/projects/withastro-astro-wfi4ll/node_modules/@react-spectrum/actiongroup/dist/main.css
  Hint:
    You likely need to add this package to `vite.ssr.noExternal` in your astro config file.

Following the error's directions (adding @adobe/react-spectrum to vite.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

[barelyhuman]

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

[CanRau]

For me it worx 🥳 thanks a lot for looking into it @barelyhuman

[fredericrous]

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

[davidlormor]

Confirmed that @barelyhuman's solution worked for me when using Remix w/ Vite as well.

[M4qu14v3l0]

@barelyhuman not working for me, I'm getting this error:

module is not defined

Just that in my console

[itsam]

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

[barelyhuman]

any chance you can post a reproduction of just that ?

[itsam]

@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]

@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

[itsam]

Thanks, just for reference I open an issue at https://github.com/withastro/astro/issues/10926

[itsam]

OK, the above link gives the solution. Any ideas how to embrace / wrap my app with <Provider> in Astro is more than welcome