Chakra UI styles break only in local environment, display correctly on Vercel (App Router, Edge runtime)

[uniunitaro]

Verify canary release

• [X] 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 Fri Jan 27 02:56:13 UTC 2023
    Binaries:
      Node: 18.14.2
      npm: 9.5.0
      Yarn: N/A
      pnpm: 8.6.3
    Relevant Packages:
      next: 13.4.12
      eslint-config-next: 13.4.12
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App Router, Middleware / Edge (API routes, runtime)

Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/github/UniuniTaro/styles-bug-on-edge/main

To Reproduce

1. Access the provided CodeSandbox and observe that the styles are not applied correctly during server-side rendering.
2. Next, navigate to the deployed page on Vercel and verify that the styles are applied correctly during server-side rendering as well.

Describe the Bug

The issue occurs when using the Edge runtime and running the application in a local environment using next dev or next start. The styles break in these scenarios. However, when deploying the application on Vercel, the styles are displayed correctly during server-side rendering.

Even after adding the 'use client' directive in the page.tsx, the behavior remains the same.

The problem could potentially be related to Emotion. However, it is unclear why the application functions correctly on Vercel.

There is uncertainty about whether the pages are statically generated. The presence of Edge Function logs in Vercel suggests that the pages might not be statically generated, as these logs are recorded for each access.

Expected Behavior

The same behavior is expected in the local environment and on Vercel.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

next start and Vercel

[dkokotov]

I've run into the same issue and wasted close to a day trying to figure out workarounds. Worse, it completely breaks libraries like chakra-react-select , as they try to retrieves properties from the theme that don't exist and throw "attempt to access property on undefined" errors.

The problem appears to still exist on 13.4.19.

@uniunitaro not sure if you ever found a satisfactory workaround.

[uniunitaro]

Unfortunately I have not found a workaround. I really want to use Edge runtime, so I set runtime to nodejs only during development. Vercel members have not responded to this issue.:cry:

[tomdygo]

We're also having this issue. For people investigating the problem:

1. You can't dynamically set the runtime as edge because of the way nextjs builds these files. It needs to see the const set before any initial build steps.
2. Our current understanding is that this is specifically caused by the way nextjs handles edge functions when run locally. When deployed on vercel it has no issues.