Server Side Rendering doesn't work with latest NextJS

[schabluk]

🐛 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

[devongovett]

The error seems to be complaining about your postcss config. Are you sure it's correct and you have all of those modules installed properly?

[schabluk]

@devongovett: Yes, I'm pretty sure my setup is correct. Everything was working before I installed @adobe/react-spectrum and configured SSRProvider and theme Provider.

The first error is about the PostCSS, but the second complains about this line:

// node_modules/@react-spectrum/actiongroup/dist/module.js
import "./main.css";

[devongovett]

Did you check out the example project? https://github.com/devongovett/rsp-next

[schabluk]

So, I could finally make the build work without errors after changing postcss.config.js like this:

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

However, it turns out that @zeit/next-css doesn't allow me to use CSS Modules together with regular CSS files from react-spectrum - it works only with built-in css module support. At this point I have to bail out on it, because most of my codebase uses CSS Modules. Though, I'm still going to use react-aria and react-stately :)

Any chance that the built-in CSS in Next will be supported by Spectrum in the near future?

[devongovett]

TBH I'm not sure what we could do about it. Next doesn't load CSS files from node_modules so I'm not sure how we're expected to distribute the styles or how that would play with other tools. The current recommendation in the docs is the best we could come up with after talking to the Next team without completely changing how we distribute the styles. If anyone has any better ideas we'd love to hear them though. 😄

[schabluk]

@devongovett: please check related issue in tailwindcss: tailwindlabs/tailwindcss#2547

[schabluk]

Importing css from 3rd party components is supported in Next v10: https://nextjs.org/blog/next-10#importing-css-from-third-party-react-components

[devongovett]

Hmm still can't import css from within node_modules though. I don't think we want to force people to manually import the css file for each component they use...

[schabluk]

I don't think we want to force people to manually import the css file for each component they use...

No, that would be overcomplicated. Weird that it doesn't work from within node_modules...

[twavv]

It's worth noting that asking users to import CSS for every component *is the approach that Reach UI takes, and it's not overly complicated (though there are comparatively fewer components).

[DarkPurple141]

Using a Babel plugin may help here. Alternatively an approach like https://github.com/atlassian-labs/compiled might make sense?

[ZLevine]

It's worth noting that asking users to import CSS for every component *is the approach that Reach UI takes, and it's not overly complicated (though there are comparatively fewer components).

Agreed. Also you avoid importing CSS for components you never use.

[nhducit]

both nextjs and react spectrum are awesome but it sad they are not easy to use them together