react-spectrum: Server Side Rendering doesn't work with latest NextJS

🐛 Bug Report

The guide for setting up SSR configuration in NextJS doesn’t work with its latest version.

🤔 Expected Behavior

No errors.

😯 Current Behavior

After following the guide: https://react-spectrum.adobe.com/react-spectrum/ssr.html#nextjs I’m getting an error:

ready - started server on http://localhost:3000
info  - automatically enabled Fast Refresh for 1 custom loader
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled

info  - Using external babel configuration from /Users/my/project/.babelrc.js
error - ./src/styles/globals.css
TypeError: Invalid PostCSS Plugin found at: plugins[0]

(@/Users/my/project/postcss.config.js)
    at Array.forEach (<anonymous>)

Content of postcss.config.js:

module.exports = {
  plugins: ['tailwindcss', 'autoprefixer', 'postcss-import'],
}

The @zeit/next-css plugin is considered to be obsolete according to: https://err.sh/next.js/built-in-css-disabled

After removing @zeit/next-css plugin, I’m getting:

error - ./node_modules/@react-spectrum/actiongroup/dist/main.css
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to src/pages/_app.tsx. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://err.sh/next.js/css-global
Location: node_modules/@react-spectrum/actiongroup/dist/module.js

💁 Possible Solution

The suggestion is that the maintainer should publish a compiled version of the dependency: https://github.com/vercel/next.js/blob/master/errors/css-npm.md

🌍 Your Environment

Software	Version(s)
react-spectrum	3.4.0
next	9.5.5

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 11
Comments: 29 (8 by maintainers)

Most upvoted comments

FWIW – i think i was able to get this running. according to this issue in next-transpile-modules, a fix shipped in 7.2.

to get it to run without error, i had to do the following:

use the explicit list of modules instead of wildcard (it complained about not being able to find module)
install webpack@4 (with webpack5 it was giving an error about “tap” being undefined). got the idea from here
not sure if this did anything, but i also did: node v14, rm -fr ./node_modules; rm-fr ./.next

after that npm run dev loads the site. no idea if it’s actually working though. i’m new to both nextjs and spectrum.

Edit: yeah… that got rid of the errors but it still doesn’t work. There is a lengthy issue open at nextjs without any solutions too so… 🤷

In the meantime maybe docs could be updated to mention it only works with nextjs v9 and an explanation? AFAICT it’s a nextjs issue not spectrum

cmawhorter on Jun 15, 2021