question-mark
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.

Supporting Emotion and The Next.js Edge Runtime

See original GitHub issue

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Fri Jul 22 14:03:36 UTC 2022
Binaries:
  Node: 16.15.0
  npm: 8.5.5
  Yarn: N/A
  pnpm: 7.1.7
Relevant packages:
  next: 12.2.4-canary.8
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Emotion recently implemented workers support, which means that it should work for the Edge Runtime of Next.js. I’ve quickly tested this with the latest version of Emotion (https://github.com/emotion-js/emotion/pull/2819), since the worker runtime should have the same APIs as the Edge Runtime of Verce / Next.js.

Here’s a more advanced repository to test Emotion / Chakra with Edge Runtime support: https://github.com/ItsWendell/next-edge-runtime-chakra-ui-emotion

While a specific worker bundle output is available for emotion now, the edge runtime/compiler doesn’t seem to use it.

ReferenceError: document is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js (199:0)
eval
node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js (199:0)

Emotion exports separate bundles for workers, e.g. *.worker.esm.js, which might also work with the Edge Runtime.

I would love to see what it requires to make Emotion plug and play for the Edge Runtime of Next.js / Vercel, this will open up the door for a lot of UI libraries like Chakra-UI to be compatible with it rendering on the edge too!

Expected Behavior

Next.js uses the worker bundle with the edge-runtime enabled.

Link to reproduction

https://github.com/ItsWendell/next-emotion-cache-edge-runtime

To Reproduce

  • Start up the reproduction repository
  • The page will output the following server error:
Server Error
ReferenceError: document is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js (199:0)
eval
node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js (199:0)

I’ve opened a similar comment at https://github.com/emotion-js/emotion/issues/2801

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:13 (7 by maintainers)

github_iconTop GitHub Comments

3reactions
Andaristcommented, Aug 2, 2022

Emotion maintainer here 👋

Note that we forgot to add a worker condition in @emotion/cache. So it’s not that surprising that this particular package still didn’t work here.

I’ve just released a new version of this package, with the appropriate condition, could you check if this has fixed your issue?

2reactions
ItsWendellcommented, Aug 3, 2022

Thanks, @Andarist for the update! Currently, we are picking the browser field to target the runtime, but there is a discussion on our side to maybe favor a special condition that describes our runtime better. +1

Is there a separate issue tracking this or is this an internal conversation? Curious what will be decided on!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Edge Runtime - Next.js
The Next.js Edge Runtime is based on standard Web APIs. Learn more about the supported APIs available.
Read more >
Server Side Rendering - Emotion
To use emotion's SSR with Next.js you need a custom Document component in pages/_document.js that renders the styles and inserts them into the...
Read more >
Emotion with edge runtime : r/nextjs - Reddit
Emotion will attempt to load the browser bundle when in the worker/edge environment, which obviously not going to work. I wonder if anyone...
Read more >
Sebastien Lorber • ⚛️ ThisWeekInReact.com on Twitter ...
Emotion maintainer explains tradeoffs of CSS-in-JS libs with runtime. ... Cloudflare Pages support for Next.js Edge Runtime -.
Read more >
This Week In React #121: Next.js, experimental_cache, CSS ...
Sam is a maintainer of Emotion, one of the most popular CSS-in-JS libs ... Cloudflare Pages support for Next.js Edge Runtime: Cloudflare now ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found