Server Side Rendering doesn't work with latest NextJS #1156

schabluk · 2020-10-11T11:23:48Z

🐛 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

The text was updated successfully, but these errors were encountered:

devongovett · 2020-10-11T16:52:13Z

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 · 2020-10-11T17:32:51Z

@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 · 2020-10-12T03:38:38Z

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

schabluk · 2020-10-12T07:53:41Z

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 · 2020-10-13T22:47:33Z

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 · 2020-10-14T06:29:55Z

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

schabluk · 2020-10-27T19:44:51Z

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 · 2020-10-27T23:13:17Z

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 · 2020-10-28T08:19:51Z

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 · 2020-12-19T06:52:25Z

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 · 2020-12-25T09:19:09Z

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

ZLevine · 2021-01-06T19:45:19Z

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 · 2021-01-12T13:05:02Z

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

kennetpostigo · 2021-02-05T17:55:48Z

Hi, I'm running into this with a bare nextjs application, and I opened a issue in the example repo, so just wanted to reference here.

Does anyone know if theres a work around?

ryankauk · 2021-02-27T04:44:29Z

I was thinking maybe there's a way to ignore the css imports from webpack config side and then just import the styles manually. I don't know enough about webpack, does anyone with more web pack knowledge know a way for this to be possible?

I tried https://webpack.js.org/plugins/ignore-plugin/ out but it didn't seem to work

tanishqkancharla · 2021-03-20T22:20:40Z

Hey I'm new to this, so forgive me for not completely understanding the problem but couldn't Spectrum just publish using CSS modules instead of global css? Or do the distributed version necessarily convert the modules into global css?

Amir-Abushanab · 2021-05-09T20:45:39Z

Starting a new Typescript + Next.js (10.2.0) project and I've hit a brick wall with this too

abhinav-anshul · 2021-05-15T15:46:57Z

Hi, anyone came up with a solution?

edazpotato · 2021-06-04T02:22:07Z

I've had this same issue. If anyone has a workaround, that would be great!

cmawhorter · 2021-06-15T00:44:01Z

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

DaveStein · 2021-06-30T20:54:21Z

@cmawhorter did you do this in NextJS 10 or 11?

cmawhorter · 2021-06-30T21:03:22Z

@DaveStein pretty sure it was v10

DaveStein · 2021-06-30T21:34:48Z

Ah I'm on 11 so I'm scared to even try vs await what the maintainer says over at martpie/next-transpile-modules#222

reidbarber · 2021-07-19T19:16:03Z

Posting here for visibility, but it seems to be working with the config posted over at martpie/next-transpile-modules#222 (comment). Big thanks to @fabianishere and @DaveStein.

next.config.js:

const withTM = require("next-transpile-modules")([
  "@adobe/react-spectrum",
  "@react-spectrum/actiongroup",
  "@react-spectrum/breadcrumbs",
  "@react-spectrum/button",
  "@react-spectrum/buttongroup",
  "@react-spectrum/checkbox",
  "@react-spectrum/combobox",
  "@react-spectrum/dialog",
  "@react-spectrum/divider",
  "@react-spectrum/form",
  "@react-spectrum/icon",
  "@react-spectrum/illustratedmessage",
  "@react-spectrum/image",
  "@react-spectrum/label",
  "@react-spectrum/layout",
  "@react-spectrum/link",
  "@react-spectrum/listbox",
  "@react-spectrum/menu",
  "@react-spectrum/meter",
  "@react-spectrum/numberfield",
  "@react-spectrum/overlays",
  "@react-spectrum/picker",
  "@react-spectrum/progress",
  "@react-spectrum/provider",
  "@react-spectrum/radio",
  "@react-spectrum/slider",
  "@react-spectrum/searchfield",
  "@react-spectrum/statuslight",
  "@react-spectrum/switch",
  "@react-spectrum/tabs",
  "@react-spectrum/text",
  "@react-spectrum/textfield",
  "@react-spectrum/theme-dark",
  "@react-spectrum/theme-default",
  "@react-spectrum/theme-light",
  "@react-spectrum/tooltip",
  "@react-spectrum/view",
  "@react-spectrum/well",
  "@spectrum-icons/ui",
  "@spectrum-icons/workflow"
]);

module.exports = withTM({});

You may need to remove some of these if you're using an older version, or add some if new components become available.

Hopefully we can update the docs and add an example pretty soon.

DaveStein · 2021-07-19T19:24:04Z

A key thing for debugging in 222 was that using the error messages as normal,I was able to nail down all the @react-spectrum values. Fabian then described in ticket how doing an inspect mode showed him additional things like @spectrum-icons

sarnason · 2021-07-27T23:46:11Z

It's not working for me. Spent two days already trying to get a large project to build.
Made a sample with details in the readme. I am sure @devongovett will find it interesting as it is based on his original sample.
https://github.com/sarnason/rsp-next-ts

reidbarber · 2021-07-28T04:15:40Z

@sarnason I've got working examples at rsp-next-ts and rsp-next for reference. Both fresh from create-next-app.

sarnason · 2021-07-29T15:34:57Z

Thanks @reidbarber! I was able to find my problem by comparing the two. Turns out that using the nightly wasn't such a good idea. Shall I file a bug for it being broken?

reidbarber · 2021-08-02T15:28:54Z

@sarnason Feel free to create one if you still have good details about the error you were getting

matthewdeutsch added the ssr label Oct 19, 2020

snowystinger mentioned this issue Jan 5, 2021

Usage in Frontity framework (NextJs like framework for a wordpress frontend) #1441

Closed

nhducit mentioned this issue Jan 18, 2021

Global CSS cannot be imported from within node_modules martpie/next-transpile-modules#146

Closed

2 tasks

jkwchui mentioned this issue Jul 24, 2021

Unable to resolve "@spectrum-icons/.*" #1783

Closed

reidbarber mentioned this issue Jul 27, 2021

Update SSR docs for Next.js 11 #2159

Closed

msabramo mentioned this issue Dec 17, 2021

Add getModules function to make transpiling easier with Next.js. #2696

Closed

5 tasks

reidbarber closed this as completed Aug 4, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Server Side Rendering doesn't work with latest NextJS #1156

Server Side Rendering doesn't work with latest NextJS #1156

schabluk commented Oct 11, 2020 •

edited

Loading

devongovett commented Oct 11, 2020

schabluk commented Oct 11, 2020 •

edited

Loading

devongovett commented Oct 12, 2020

schabluk commented Oct 12, 2020

devongovett commented Oct 13, 2020 •

edited

Loading

schabluk commented Oct 14, 2020 •

edited

Loading

schabluk commented Oct 27, 2020

devongovett commented Oct 27, 2020

schabluk commented Oct 28, 2020

twavv commented Dec 19, 2020

DarkPurple141 commented Dec 25, 2020

ZLevine commented Jan 6, 2021

nhducit commented Jan 12, 2021

kennetpostigo commented Feb 5, 2021 •

edited by snowystinger

Loading

ryankauk commented Feb 27, 2021 •

edited

Loading

tanishqkancharla commented Mar 20, 2021

Amir-Abushanab commented May 9, 2021

abhinav-anshul commented May 15, 2021

edazpotato commented Jun 4, 2021

cmawhorter commented Jun 15, 2021 •

edited

Loading

DaveStein commented Jun 30, 2021

cmawhorter commented Jun 30, 2021

DaveStein commented Jun 30, 2021

reidbarber commented Jul 19, 2021 •

edited

Loading

DaveStein commented Jul 19, 2021

sarnason commented Jul 27, 2021

reidbarber commented Jul 28, 2021

sarnason commented Jul 29, 2021

reidbarber commented Aug 2, 2021

Server Side Rendering doesn't work with latest NextJS #1156

Server Side Rendering doesn't work with latest NextJS #1156

Comments

schabluk commented Oct 11, 2020 • edited Loading

🐛 Bug Report

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

🌍 Your Environment

devongovett commented Oct 11, 2020

schabluk commented Oct 11, 2020 • edited Loading

devongovett commented Oct 12, 2020

schabluk commented Oct 12, 2020

devongovett commented Oct 13, 2020 • edited Loading

schabluk commented Oct 14, 2020 • edited Loading

schabluk commented Oct 27, 2020

devongovett commented Oct 27, 2020

schabluk commented Oct 28, 2020

twavv commented Dec 19, 2020

DarkPurple141 commented Dec 25, 2020

ZLevine commented Jan 6, 2021

nhducit commented Jan 12, 2021

kennetpostigo commented Feb 5, 2021 • edited by snowystinger Loading

ryankauk commented Feb 27, 2021 • edited Loading

tanishqkancharla commented Mar 20, 2021

Amir-Abushanab commented May 9, 2021

abhinav-anshul commented May 15, 2021

edazpotato commented Jun 4, 2021

cmawhorter commented Jun 15, 2021 • edited Loading

DaveStein commented Jun 30, 2021

cmawhorter commented Jun 30, 2021

DaveStein commented Jun 30, 2021

reidbarber commented Jul 19, 2021 • edited Loading

DaveStein commented Jul 19, 2021

sarnason commented Jul 27, 2021

reidbarber commented Jul 28, 2021

sarnason commented Jul 29, 2021

reidbarber commented Aug 2, 2021

schabluk commented Oct 11, 2020 •

edited

Loading

schabluk commented Oct 11, 2020 •

edited

Loading

devongovett commented Oct 13, 2020 •

edited

Loading

schabluk commented Oct 14, 2020 •

edited

Loading

kennetpostigo commented Feb 5, 2021 •

edited by snowystinger

Loading

ryankauk commented Feb 27, 2021 •

edited

Loading

cmawhorter commented Jun 15, 2021 •

edited

Loading

reidbarber commented Jul 19, 2021 •

edited

Loading