Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Emotion no longer works with edge runtime since v12.2.6-canary.5 #42107

Open
1 task done
mwskwong opened this issue Oct 29, 2022 · 0 comments
Open
1 task done

Emotion no longer works with edge runtime since v12.2.6-canary.5 #42107

mwskwong opened this issue Oct 29, 2022 · 0 comments
Labels
bug Issue was opened via the bug report template.

Comments

@mwskwong
Copy link

mwskwong commented Oct 29, 2022

Verify canary release

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

Provide environment information

    Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Home
    Binaries:
      Node: 18.10.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.0.1-canary.0
      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

When using Emotion with edge runtime, the project will fail to build with the following errors.

info  - Collecting page data ..ReferenceError: self is not defined
    at Object.<anonymous> (C:\Users\matth\OneDrive\Documents\emotion-with-edge-runtime\.next\server\pages\index.js:1:1)
    at Module._compile (node:internal/modules/cjs/loader:1149:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1203:10)
    at Module.load (node:internal/modules/cjs/loader:1027:32)
    at Module._load (node:internal/modules/cjs/loader:868:12)
    at Module.require (node:internal/modules/cjs/loader:1051:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.requirePage (C:\Users\matth\OneDrive\Documents\emotion-with-edge-runtime\node_modules\next\dist\server\require.js:58:12)
    at C:\Users\matth\OneDrive\Documents\emotion-with-edge-runtime\node_modules\next\dist\server\load-components.js:55:50
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

> Build error occurred
Error: Failed to collect page data for /
    at C:\Users\matth\OneDrive\Documents\emotion-with-edge-runtime\node_modules\next\dist\build\utils.js:746:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}
info  - Collecting page data .

The main problem seems to be the fact that some info provided by the edge runtime mislead Emotion to think that it is a browser environment, and Emotion attempts to load the browser bundle in the edge environment because of that which clearly not gonna work.

Something seems to have changed/been introduced since v12.2.6-canary.5 which leads to this issue, given it is still working in v12.2.6-canary.4. The linked GitHub repo contains 3 branches that uses v13.0.1-canary.0 (latest as of this issue is created), v12.2.6-canary.5 and v12.2.6-canary.4 respectively.

This is kind of related to #39229, but Emotion should have made a new release to fix that already.

Expected Behavior

Emotion project can be built and run normally with edge runtime

Link to reproduction

https://github.com/mwskwong/emotion-with-edge-runtime

To Reproduce

  1. Use Emotion in a project
  2. Enable Edge runtime
  3. Build the project
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Development

No branches or pull requests

1 participant