Emotion css() + Turbopack leads to null CSS className in SSR and unapplied styles

[miselin]

Link to the code that reproduces this issue

https://github.com/miselin/next-turbo-emotion-ssr-repro

To Reproduce

1. npm run dev
2. Visit http://localhost:3000
3. Note that the Hello string is in the top left corner of the page, rather than offset by 300 pixels vertically and horizontally
4. Check dev console, see a thrown exception like Warning: Prop className did not match. Server: "null" Client: "css-1jhmqjz-Home"

Current vs. Expected behavior

Expected: without --turbo, these CSS classes compile correctly and successfully render. This can be seen in the repro by removing --turbo.

Current: the SSR and client-side CSS classes don't match, and the styles do not apply correctly.

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.6.0: Thu Nov  2 07:43:57 PDT 2023; root:xnu-8796.141.3.701.17~6/RELEASE_ARM64_T6000
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: 1.22.19
  pnpm: 8.11.0
Relevant Packages:
  next: 14.0.4-canary.39
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Turbopack (--turbo)

Additional context

This is a minimal repro from a much larger codebase. I've tried a few combinations of compiler.emotion settings in next.config.js to no avail.

_PACK-2084

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.