Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Built-in CSS Module Support Not Injecting *.module.css styling during SSR #10268

Closed
Lwdthe1 opened this issue Jan 26, 2020 · 20 comments
Closed

Built-in CSS Module Support Not Injecting *.module.css styling during SSR #10268

Lwdthe1 opened this issue Jan 26, 2020 · 20 comments
Assignees
@Timer
Labels
please add a complete reproduction The issue lacks information for further investigation
Milestone
iteration 3

Comments

@Lwdthe1
Copy link

Lwdthe1 commented Jan 26, 2020 •
edited

Bug report

Describe the bug

The new built-in css module support does not work during SSR, at least not without further configuration that I'm not aware of. Once the page is loaded client side, the styles are injected for the component and everything looks as it should.

I checked the html using Postman http client and noticed that there's no <style></style> element injected in the <head /> element. However, after the page loads in a browser, that <style></style> element is injected with the expected scoped css.

I tried the basic example from the blog post, and it worked. However, there's no example with SSR and components.

To Reproduce

I have a custom pages/_app.jsx and a component somewhere in my pages/index.jsx page, which is server side rendered using getInitialProps(). The component imports its own ./comp.module.css file.

Expected behavior

The css modules imported across my app structure should be gathered during server side rendering and injected into the <head/> of my html that is sent to the client. That way, when the user first sees my page, all the styling is in place.

Screenshots

What's sent down from SSR:

Screen Shot 2020-01-25 at 8 51 12 PM

What's show after the module's css is finally injected into the <head/> on the client:

Screen Shot 2020-01-25 at 8 51 13 PM

System information

OS: macOS
Browser: Chrome
Version of Next.js: 9.2.1

Additional context

This may be related to #10267
This is the feature I'm referring to: https://nextjs.org/blog/next-9-2#built-in-css-module-support-for-component-level-styles
@Lwdthe1
Copy link
Author

Lwdthe1 commented Jan 26, 2020 •
edited

I see that the CSS modules page mentions having to also use the postcss plugin to use css modules on the server side. Is postcss the suggested solution to my issue?

I'd greatly appreciate an example of this new feature with a basic SSR app to see how I'm supposed to hook this up.

https://github.com/css-modules/css-modules#server-side-and-static-websites

@xzilja

This comment has been minimized.

Sign in to view
@joonhocho
Copy link

having the same issue as well for both development and production mode.

@Timer Timer self-assigned this Jan 27, 2020
@xzilja

This comment has been minimized.

Sign in to view
@timneutkens timneutkens added the please add a complete reproduction The issue lacks information for further investigation label Jan 27, 2020
@timneutkens
Copy link
Member

Can you provide a complete reproducible demo so that we can have a look

@joonhocho joonhocho mentioned this issue Jan 27, 2020
Closed
@xzilja

This comment has been minimized.

Sign in to view
@Timer

This comment has been minimized.

Sign in to view
@Timer
Copy link
Member

Timer commented Jan 27, 2020

@Lwdthe1 can you please provide a reproducible demo? 🙏

@Timer Timer mentioned this issue Jan 27, 2020
Closed
@Lwdthe1
Copy link
Author

Lwdthe1 commented Jan 28, 2020

Hey, I'm sorry for the delay, but my table is currently a bit full with interview projects, so I don't have time today to make the repro. I can shoot for tomorrow.

@Timer
Copy link
Member

Timer commented Feb 3, 2020

@Lwdthe1 any update?

@ramasilveyra ramasilveyra mentioned this issue Feb 3, 2020
Closed
@ramasilveyra
Copy link
Contributor

Created issue #10404 for a very similar issue. Repro is https://github.com/ramasilveyra/bug-repro-next-global-css.

@mzygmunt
Copy link

mzygmunt commented May 6, 2020

I'm also noticing a problem with the injecting * .module.css to SSR header.

@timneutkens @Timer Reproduction is simple. Clone with-next-css example. Execute. Disable JS in the browser and refresh the page.

In my opinion, it would be appropriate to include CSS modules to the SSR page header, because SSR is very often used to improve user experience and speed up loading. Unfortunately, a site without styles looks tragic.

@Lwdthe1
Copy link
Author

Lwdthe1 commented May 7, 2020

My apologies for never following up on this. I never figured it out and have moved away from it since.

@mzygmunt mzygmunt mentioned this issue May 8, 2020
Closed
@tafelito tafelito mentioned this issue May 19, 2020
Closed
@yanv1991
Copy link

yanv1991 commented Jun 1, 2020

#13058 (comment)

@Timer
Copy link
Member

Timer commented Jun 3, 2020

Closing since OP no longer has the issue.

@Timer Timer closed this as completed Jun 3, 2020
@Timer
Copy link
Member

Timer commented Jun 22, 2020

This should be fixed in next@^9.4.5-canary.15! Please upgrade and let us know.

@Timer Timer reopened this Jun 22, 2020
@Timer Timer closed this as completed Jun 22, 2020
@Timer Timer added this to the iteration 3 milestone Jun 22, 2020
@CrocoDillon
Copy link

Thanks @Timer, it seems to work! Is JavaScript disabled also supported? When I disable JS I don't see my custom styles but it could be that my setup is wrong or outdated.

@Timer
Copy link
Member

Timer commented Jun 22, 2020

No, JavaScript cannot be disabled in development.

@jeff-zhenz
Copy link

@Timer Hey

This should be fixed in next@^9.4.5-canary.15! Please upgrade and let us know.

Hey, what has been fixed in this version specifically (CSS module can be SSR-ed from 9.4.5)?

I am actually having a similar requirement: I have a standalone navbar and footer, in order to make them work in basically any React app I implemented them react + scss module, and I now used them in a nextjs app's layout. But according to nextjs official explanation
https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css, all the CSS module will be minified into .css files, however, what I want to have is all that CSS can be injected as inline styles during SSR (somehow like what webpack style-loader does (https://webpack.js.org/loaders/style-loader/) ) so that when the user first sees my page, all the styling is in place.

So is using style-loader in webpack in next.config.js a workaround? Any thoughts, thanks

@balazsorban44
Copy link
Member

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@vercel vercel locked as resolved and limited conversation to collaborators Jan 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@Timer Timer

Labels
please add a complete reproduction The issue lacks information for further investigation
Projects
None yet
Milestone
iteration 3
Development

No branches or pull requests