How to use React Spectrum with Next.js

[vestimir]

❔ Question

Next.js does not support importing of CSS from node_modules, is there a workaround for getting Spectrum and Next.js to play together?

🔦 Context

I just created an empty Next.js project and tried to import @adobe/react-spectrum but it complains with the following error:

error - ./node_modules/@react-aria/visually-hidden/dist/main.css
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

💻 Code Sample

Empty Next.js project with the example from Spectrum Getting started in pages/index.js

[devongovett]

Hmm, I think you may need to override the webpack config to add css-loader? Possibly the next-css package could help? https://github.com/vercel/next-plugins/tree/master/packages/next-css

[ross-pfahler]

I believe this is because of this vercel/next.js#12079. It does seem like the vercel team is working on it.

[mrmntte]

Could you allow us to import the css manually?
In Next.js, importing global css is allowed only from _app.js

[RafalFilipek]

This should be solved in near future (hopefully). vercel/next.js#15208

[devongovett]

#835 sets up a test harness to ensure all the components work in an SSR environment. If anyone would like to contribute tests to help with this effort, please feel free! 😄

[krijoh92]

Not sure this is a good workaround or not, but it is a workaround. Install the following dependencies:

• @zeit/next-css
• next-compose-plugins
• next-transpile-modules

And edit your next.config.js to look something like this:

const withPlugins = require('next-compose-plugins')
const withCSS = require('@zeit/next-css')
const withTM = require('next-transpile-modules')([
  // Not sure all of the following need to be included, just did to make sure
  '@adobe/react-spectrum',
  '@adobe/react-spectrum-ui',
  '@react-aria',
  '@react-spectrum',
  '@react-stately',
])

if (typeof require !== 'undefined') {
  require.extensions['.less'] = () => {}
  require.extensions['.css'] = (file) => {}
}
global.requestAnimationFrame = (cb) => cb()

module.exports = withPlugins([withCSS, withTM], {
  // Your next configuration
})