Stuck on an issue?

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.

SSR : Empty css with @emotion/css and @emotion/cache

See original GitHub issue

Current behavior:

I followed the documentation here to extract my styles but I get an empty css. If I use @emotion/react, it works. If I use @emotion/css and extractCritical directly, it also works. But will the hydration work too ? If I test, I get twice the style, the one I inject into the head and the one injected in some kind of shadow(?) style.

To reproduce:

Go here : https://stackblitz.com/edit/node-gbbg6l
npm run start
Styles are empty for the @emotion/css + @emotion/cache test

Expected behavior:

The styles are correctly extracted.

Environment information:

react version: 18.0.0
@emotion/react version: 11.9.0

Issue Analytics

State:
Created a year ago
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

Andaristcommented, Dec 6, 2022

@antonybudianto you might want to grab cache from @emotion/css and provide it to your app using <CacheProvider/>

0reactions

antonybudiantocommented, Dec 6, 2022

Hi, what if we need to use both @emotion/css and @emotion/react? Let’s say I still have a case where I still need to use css + className for gradual migration.

Top Results From Across the Web

Server Side Rendering - Emotion

If you have dynamic global styles it's advised to create cache per single render to avoid global styles from different renders leaking into...

emotion/cache on SSR with Material-UI is always empty

The ID extraction in createExtractCriticalToChunks work well, but the cache. inserted object from emotion is now always an empty object.

Top 5 emotion-server Code Examples - Snyk

Learn more about how to use emotion-server, based on emotion-server code examples ... renderStatic(); // Flush chunk names and extract scripts, css and ......

@emotion/server | Yarn - Package Manager

Extract and inline critical css with emotion for server side rendering. ... to the css prop, a Global component for dynamic global styles,...

Material UI v5 - Emotion SSR - help - Meteor forums

I've set it up, but I cannot succeed to fill Emotion cache. ... up just missing the user agent detection for responsive css...