How to use React Spectrum with Next.js

❔ 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

Issue Analytics

State:
Created 3 years ago
Reactions:15
Comments:20 (8 by maintainers)

Top GitHub Comments

5reactions

krijoh92commented, Aug 4, 2020

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
})

4reactions

devongovettcommented, Aug 27, 2020

@SheaBelsky we have testing scheduled for Friday, so should be early next week if all goes well. Working on the docs as well. 😄

Top Results From Across the Web

Server Side Rendering - React Spectrum Libraries - Adobe

Next.js is a framework for building websites and web applications with React. It supports both server side rendering as well as static rendering....

Nextjs + react-spectrum - StackBlitz

(https://github.com/vercel/next.js/tree/. canary/packages/create-next-app). ## Getting Started. First, run the development server: ```bash. npm run dev.

react-spectrum-nextjs - CodeSandbox

import { useTextField } from "@react-aria/textfield"; · import { useRef } from "react"; · export default function IndexPage() { · const inputRef =...

Devon Govett on Twitter: "React Spectrum + Next.js. Coming ...

Main issues were: 1. Keeping generated ids for a11y consistent between server and client 2. Handling feature detection/media queries that ...

Material-UI vs React Spectrum | What are the differences?

React Spectrum - A React implementation of Spectrum, Adobe's design system (By ... Node.js. React. Next.js. styled-components. Emotion. Divjoy. Shuffle ...