[🐛 Bug]: Using Clerk on Cloudflare Pages: Unhandled ‘default’ Property TypeError Leading to HTTP 500 Errors

[zammitjohn]

next-on-pages environment related information

System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 23.5.0: Wed May 1 20:13:18 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6030 CPU: (12) arm64 Apple M3 Pro Memory: 18 GB Shell: /bin/zsh Package Manager Used: npm (10.7.0)

Relevant Packages: @cloudflare/next-on-pages: 1.11.2 vercel: 34.1.9 next: 14.2.3

Here's an improved version of your bug description:

Description

Issue Summary: Intermittent HTTP 500 server errors are encountered when navigating between routes in a web application deployed on Cloudflare. The issue temporarily resolves itself after a short duration or upon restarting the browser. The console logs indicate a cryptic error related to a TypeError.

Error Details: The error log points to a TypeError concerning an attempt to read a 'default' property of an undefined object, suggesting a possible null reference or an uninitialized variable being accessed.

{
  "outcome": "ok",
  "scriptName": "pages-worker--2581795-production",
  "diagnosticsChannelEvents": [],
  "exceptions": [],
  "logs": [
    {
      "message": [
        "TypeError: Cannot read properties of undefined (reading 'default')"
      ],
      "level": "error",
      "timestamp": 1717743513345
    }
  ],

Reproduction Steps: The problem manifests only when the application is deployed to Cloudflare (CF) and not during local development with next dev. A minimal reproduction demo is available in the public repository at zammitjohn/clerk-nextjs-cloudflare-bugger (see README). The issue is absent in the latest main branch commit after removing the Clerk package. However, the error is reproducible in the deployment corresponding to commit 09dcfed9a941f18f439bed262bb03e28d506abce, where Clerk is included as a dependency.

Deployments for Testing:

• With Clerk (commit 09dcfed): Deployment Link, where the HTTP 500 error is observed.
• Without Clerk (commit 9bac159): Deployment Link, which operates without errors.

Analysis: The issue is reproducible in a Cloudflare environment, indicating a potential environment-specific problem. The resolution of the issue upon the removal of the Clerk package suggests that the package may be causing or contributing to the problem, potentially due to a configuration error or compatibility issue with the Cloudflare environment.

Pages Deployment Method

Pages CI (GitHub/GitLab integration)

Pages Deployment ID

59977d63

Additional Information

No response

Would you like to help?

• [ ] Would you like to help fixing this bug?

[zammitjohn]

@dario-piotrowicz @GregBrimble, can you give this a look?

[LightBounded]

Getting this error too on my preview deployments. Can't find a consistent way to replicate this behavior though.

[zammitjohn]

@dario-piotrowicz, I have reproduced with latest version too @cloudflare/[email protected], deployment: https://e7a61adc.my-next-app-buv.pages.dev/. If I understand correctly, issue is happening when navigating between routes which have client components being rendered, with Clerk installed and hosted on Pages.

[huisnotacouncillor]

Getting this error too on my preview deployments. Can't find a consistent way to replicate this behavior though.

My situation is similar to yours. It is easy to reproduce when refreshing the page multiple times quickly and switching routes.

[jenslys]

Getting this aswell. Happened after migrating from Clerk Core 1 to Core 2 https://clerk.com/docs/upgrade-guides/core-2/nextjs

[Helferino]

Same issue here with very similar setup, any updates on this topic?

[zammitjohn]

I got the following response from Clerk support, this week: Apologies for the delayed response here. Worked with a colleague to try and debug this further. We're thinking it is a node.js compatibility issue with the Cloudflare Worker runtime. Cloudflare is coming out with a new compatibility flag that may resolve this, however, the ETA on when this will be available is still unknown.

[Helferino]

I switched my free Workers plan to a paid plan, and now I can't reproduce my issue anymore. It seems this fixed it for me.

[jenslys]

I switched my free Workers plan to a paid plan, and now I can't reproduce my issue anymore. It seems this fixed it for me.

Same, the issue seems to be resolved(?)

[zammitjohn]

I’m a bit stuck on this issue. @dario-piotrowicz Any chance you could help me out when you get a moment? 😃

[zammitjohn]

@Helferino @jenslys, I reproduced with workers paid plan using compatibility date "2024-05-13". Did you encounter this issue again yourself?

[zammitjohn]

No longer reproducible with the following packages:

@cloudflare/next-on-pages: 1.13.5
vercel: 37.6.1
next: 14.2.5

I don’t know what fixed it.