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