Compatibility with server-side Web API runtimes: Next.js Edge Runtime, Deno, Cloudflare Workers / Pages.

The problem

Next.js recently released Edge Runtime in version 12.2 as an experimental feature, this includes doing serverside rendering on the edge in a different runtime than Node.js. It’s a runtime similar to Deno and Cloudflare Workers / Pages, they’re built on the v8 browser engine, for the server.

I’ve experimented with running the with-emotion-swc-app example with the Experimental Edge runtime enabled, which initially caused the following issue:

error - node_modules/.pnpm/@emotion+cache@11.9.3/node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js (245:0) @ <unknown>
ReferenceError: document is not defined

The compiler/bundler loads by default the .browser version of the build output of @chakra-ui/cache, this output doesn’t have the isBrowser checks that the regular outputs have (since it assumes it’s already in the browser). This was initially fixed for me locally when I manually replaced the .browser.esm.js file with the regular .esm.js file.

Proposed solution

• Add isBrowser checks to browser bundles
• Check for available Web API alternatives instead of node APIs, if available use those in all @emotion packages.

Supporting these runtimes would greatly benefit the ecosystem and allow users of Emotion, and everything built on top of it, to use Emotion in newer runtimes and frameworks like Deno (Fresh), Next.js Edge Runtime, and Cloudflare Workers.

[Andarist]

There are some new APIs~ coming to React in the future. In the face of those possibilities, I’m not sure if it’s worth working on a custom streaming solution: https://twitter.com/joshcstory/status/1559482199388426240

Maybe we could work on a custom stream transformer, but I would be hesitant to add any code to Emotion itself (I mean our components etc) to support this.

[ItsWendell]

@srmagura that’s amazing, the Next.js Edge Runtime is actually confirmed to be built on Cloudflare Workers (at this time). So both should work here.