How to use react-spectrum with Next.js

[marafiq]

I am trying to use react-spectrum with Next.js. Encountered this error
ModuleError: Module Error (from ./node_modules/next/dist/build/webpack/loaders/error-loader.js): Global CSS cannot be imported from within node_modules. Read more: https://err.sh/next.js/css-npm Location: node_modules\@react-aria\visually-hidden\dist\module.js

Steps to reproduce

• yarn create next-app --example blog-starter
• yarn add @adobe/react-spectrum
  Add below in index.js
  `
  import {Provider, defaultTheme, Button} from '@adobe/react-spectrum'

alert('Hey there!')}> Hello React Spectrum! `

[jamesmosier]

Did you happen to take a look at https://err.sh/next.js/css-npm? It looks like react-spectrum imports CSS files itself.

Currently Next does not support this as mentioned in the above link. So the steps outlined in there would be your best bet, otherwise this feature is being tracked here #12079 and the RFC is #15208

Or additionally this is being tracked in the react-spectrum repo here adobe/react-spectrum#760