Supporting Emotion and The Next.js Edge Runtime
See original GitHub issueVerify 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:
- Created a year ago
- Comments:13 (7 by maintainers)
Top GitHub Comments
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?
Is there a separate issue tracking this or is this an internal conversation? Curious what will be decided on!