search

emotion-js / emotion

👩‍🎤 CSS-in-JS library designed for high performance style composition
https://emotion.sh/
MIT License
17.5k stars 1.11k forks source link

When using edge I get ReferenceError: document is not defined #3082

Open yarapolana opened 1 year ago

yarapolana commented 1 year ago

Can't deploy or use emotion when edge runtime is active (Chakra UI + Remix + Vercel)

Current behavior:

Local development runs without issue. When deploying to Vercel, I got this error which was hard to pinpoint where it was coming from:

Error: The Edge Function "404" is referencing unsupported modules:
--
21:35:48.714 | - html-tokenize: stream
21:35:48.714 | - multipipe: stream
21:35:48.714 | - readable-stream: stream
21:35:48.714 | - through: stream

When commenting this line and its references it deploys without issues (also when commenting out the edge config): import createEmotionServer from '@emotion/server/create-instance'

When having edge runtime off/commented out and trying to access edge functions I get this error:

ReferenceError: document is not defined
    at (node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js:461:0)
    at (build/build-edge-eyJydW50aW1lIjoiZWRnZSJ9.js:59:0)
    at (build/build-edge-eyJydW50aW1lIjoiZWRnZSJ9.js:61:0)
    at ([native code])
    at (build/server-build-edge-eyJydW50aW1lIjoiZWRnZSJ9.mjs:2:18)
    at ([native code])

To reproduce:

  1. Add Chakra UI and its configurations
  2. Add this line to activate Vercel edge export const config = { runtime: 'edge' }
  3. Deploy

  4. Get deployment error

    ---- Alternative

  5. Comment out import createEmotionServer from '@emotion/server/create-instance' and its references
  6. Deploy
  7. Test edge call
  8. See Vercel logs for error.

Here is a repo: https://github.com/yarapolana/testing-edge

Expected behavior:

Expected:

  1. Configurations to not interfere with deployment.
  2. Making calls to the edge without failing.

Environment information:

    "@chakra-ui/react": "^2.8.0",
    "@emotion/react": "^11.11.1",
    "@emotion/server": "^11.11.0",
    "@emotion/styled": "^11.11.0",
    "@remix-run/cloudflare": "^1.18.1",
    "@remix-run/cloudflare-workers": "^1.18.1",
    "@remix-run/css-bundle": "^1.18.1",
    "@remix-run/node": "^1.18.1",
    "@remix-run/react": "^1.18.1",
    "@remix-run/vercel": "^1.18.1",
    "@vercel/node": "^2.15.3",
    "@vercel/remix": "^1.18.1",
    "@vercel/remix-entry-server": "^0.1.1",
    "framer-motion": "^10.13.0",
    "isbot": "^3.6.8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"

Thanks for your time.

onurhan1337 commented 5 months ago

Have you found a solution to the problem?

Andarist commented 5 months ago

you should configure your bundler to use the worker condition