Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Built-in CSS Module Support Not Injecting *.module.css styling during SSR
See original GitHub issueBug 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:
What’s show after the module’s css is finally injected into the <head/> on the client:
System information
OS: macOS Browser: Chrome Version of Next.js: 9.2.1
Additional context
This may be related to https://github.com/zeit/next.js/issues/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
Issue Analytics
- State:
- Created 4 years ago
- Reactions:11
- Comments:20 (9 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
having the same issue as well for both development and production mode.
No, JavaScript cannot be disabled in development.