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