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.

Add support for Cloudflare Worker environment in @emotion/cache, @emotion/styled, @emotion/react, and @emotion/server

See original GitHub issue

Some discussion of the issue in the emotion Slack channel.

Current behavior:

Attempting to render a React application using emotion as guided by the documentation will result in the Cloudflare Worker immediately crashing, as described here.

This is because stream is not present in a Worker environment.

After removing the code in @emotion/server ~which imports~ which indirectly imports stream through through, the Worker will no longer immediate crash on startup, but will throw an error on rendering:

ReferenceError: document is not defined
    at createCache (./index.mjs:1173:38)
    at handleRequest (./index.mjs:2241:19)
    at Object.fetch (./index.mjs:2236:22) at line 1172, col 36

This is due to the Worker bundler targeting the browser. Rollup (webpack untested) will optimize away isBrowser checks (as it should always be true), which still leaves references to document, which is undefined in the Worker environment. This issue is also described here. Hardcoding isBrowser = false results in successful rendering.

To reproduce:

Clone this Github repository and follow the README.

Expected behavior:

Ideally, emotion + react + SSR should work within Workers.

Environment information:

react version: 17.0.2
@emotion/react version: 11.6.0
@emotion/server version: 11.4.0
@emotion/cache version: 11.6.0
@emotion/styled version: 11.6.0

Issue Analytics

State:
Created 2 years ago
Reactions:13
Comments:23 (9 by maintainers)

Top GitHub Comments

9reactions

aiji42commented, Feb 9, 2022

@chasoft @pavi2410 Hi, this is a repository of samples for running Remix and emotion with cloudflare workers. Please refer to this sample to get by until this issue is resolved. https://github.com/aiji42/remix-emotion-on-cloudflare#conform-to-emotion

I hope this is helpful to you.

7reactions

nicksrandallcommented, Dec 10, 2021

Update: I have a PR into preconstruct (which emotion uses to build its packages) to support “custom package exports conditionals” – including support for a new “worker” conditional that can be used for Cloudflare worker style environments.

I also have a PR to emotion (currently in draft mode) that uses this new version of precontruct to enable package exports on all the relevant packages, including the new “worker” conditional.

Finally, I have a super simple Cloudflare Worker deployed using the updated emotion packages and it works!

Top Results From Across the Web

Environment variables - Workers - Cloudflare Docs

To add environment variables, such as vars and secret : Go to your Workers script > Settings > Add variable under Environment Variables....

Server Side Rendering - Emotion

Server side rendering works out of the box in Emotion 10 and above if you're only using @emotion/react and @emotion/styled . This means...

emotion - Bountysource

Looks like @emotion/server always assumes a Node.js environment. However, it is now possible to do SSR in Workers environment (such as Cloudflare Workers)....

Emotion - Server Side Rendering

The rendered output will insert a <style> tag above each element with styles for ... import { CacheProvider } from '@emotion/react' import {...

4.xml - jsDelivr

... monthly https://www.jsdelivr.com/package/npm/@el12n/react-native-zendesk-support monthly https://www.jsdelivr.com/package/npm/@el173/react-native-hms ...