Next.js in development mode throws a client-side exception on Safari 16.3 in version 14.2.11

[sadkebab]

Link to the code that reproduces this issue

https://github.com/sadkebab/nextjs-safari-bug

To Reproduce

1. pnpm dev
2. Open localhost:3000 on safari 16.3, it will always show a black screen with the "Application error: a client-side exception has occurred (see the browser console for more information)." message if you are using the App Router or a blank white screen if you are using the Pages Directory
3. Change version of next to 14.2.10 in package.json
4. pnpm i
5. pnpm dev
6. Open localhost:3000 on safari 16.3, it will show the default home page for a new next.js project

Current vs. Expected behavior

I should be able to run my Next application on Safari 16 while developing.

Homepage (App Router) for version 14.2.11

Homepage (Pages Directory) for version 14.2.11

Expected homepage as it was until version 14.2.10

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:39:46 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T6020
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 22.4.0
  npm: 10.8.1
  Yarn: N/A
  pnpm: 9.9.0
Relevant Packages:
  next: 14.2.11 // Latest available version is detected (14.2.11).
  eslint-config-next: 14.2.11
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.6.2
Next.js Config:
  output: N/A

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

Developer Experience, Testing

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

next dev (local)

Additional context

The bug seems to affect only version 14.2.11 both for App Router and Pages Directory, canary is not affected. The problem does not occur outside of next dev, meaning that if I do next build && next start the result is the expected one both as a static output and as a dynamic page generation.

[samcx]

@sadkebab Unfortunately, I am not on Safari 16.3 to test this. Working fine on Safari 18.

Is there any error in your console? It may be create-next-app related.

[sadkebab]

I don't think It's an issue with create-next-app since I discovered this by upgrading a project from 14.2.5 to 14.2.11.
Somebody already posted a screenshoot of the error in the discussion and it's the same I get too.

[lumitor2]

I have same issue. Downgrade back to "next": "14.2.10" fixes this issue.

[samcx]

@lumitor2 This doesn't look like Safari. Can you share an exact :repro: of this, and also share the output of next info?

[samcx]

It looks like this is related to this issue → #65412

We are taking a look!

[sadkebab]

I checked my safari console and URL.canParse does not exist there so I guess that's it!

[samcx]

Update: #65412 (comment)

[sadkebab]

Nice!

[sadkebab]

Is there a way for me to attach a polyfill or something in my project (app router) to patch this until the fix is released? It would be nice to work on 14.2.11 without safari being untestable in next dev.

[samcx]

@sadkebab The fix is already here though!

• https://github.com/vercel/next.js/releases/tag/v15.0.0-canary.159
• Replace URL.canParse #70215
• feat: add polyfill of URL.canParse for browser compatibility #70228