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

[mwskwong]

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