Skip to content

Latest Safari freezes when opening devtools for projects using webpack #78524

@peabnuts123

Description

@peabnuts123

Link to the code that reproduces this issue

https://github.com/peabnuts123/next-safari-18.4-issue

(this is an unmodified, default next.js app, generated by npx create-next-app@latest)

To Reproduce

  1. Be on latest MacOS Sequoia 15.4 and Safari 18.4
  2. Create a new app with npx create-next-app@latest
    • I used the following settings. The only setting that seems to matter is that you choose Webpack for the bundler.
    ✔ What is your project named? … next-bug-safari-deleteme
    ✔ Would you like to use TypeScript? … Yes
    ✔ Would you like to use ESLint? … Yes
    ✔ Would you like to use Tailwind CSS? … Yes
    ✔ Would you like your code inside a `src/` directory? … Yes
    ✔ Would you like to use App Router? (recommended) … No
    ✔ Would you like to use Turbopack for `next dev`? … No
    ✔ Would you like to customize the import alias (`@/*` by default)? … Yes
    ✔ What import alias would you like configured? … @app/*
    
  3. Run the app with npm run dev
  4. Open the app in Safari (i.e. http://localhost:3000)
  5. Observe the app loads fine
  6. Open devtools (Cmd+Opt+I) and immediately type something (e.g. a bare number like 2) into console
  7. Try and send the command in console
  8. Observe the browser is hanging
  9. (5-10 seconds later) Observe the browser becomes responsive again and the problem resolves

You may also close + reopen devtools and notice this freeze happens each time.

Current vs. Expected behavior

Current behaviour:

  • The browser hangs upon opening devtools

Expected

  • No issues upon opening devtools

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.4.0: Wed Mar 19 21:17:32 PDT 2025; root:xnu-11417.101.15~1/RELEASE_ARM64_T6030
  Available memory (MB): 36864
  Available CPU cores: 12
Binaries:
  Node: 22.14.0
  npm: 10.9.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.3.1 // Latest available version is detected (15.3.1).
  eslint-config-next: 15.3.1
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.3
Next.js Config:
  output: N/A

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

Webpack

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

next dev (local)

Additional context

(All the stuff I wrote in this field got deleted? I had to retype it)

  • I have tested with next@15.4.0-canary.8 and problem still persists
  • I have tested the problem in Safari Technology Preview and the issue does NOT occur, which leads me to believe this is a Safari bug. However, if many people are going to end up on this version of Safari (which only updates with MacOS), then I thought it might be worth fixing on next's end.
  • If you open devtools BEFORE loading the page, you can see there are no console errors or blocking network requests (i.e. the browser isn't hanging on some slow network request). Perhaps the issue is something to do with webpack's dev server websocket?

Metadata

Metadata

Assignees

No one assigned

    Labels

    WebpackRelated to Webpack with Next.js.linear: nextConfirmed issue that is tracked by the Next.js team.

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions