Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
peabnuts123 opened this issue Apr 24, 2025 · 1 comment
Open
Labels
Webpack Related to Webpack with Next.js.

Comments

@peabnuts123
Copy link

peabnuts123 commented Apr 24, 2025

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?
@github-actions github-actions bot added the Webpack Related to Webpack with Next.js. label Apr 24, 2025
@edoko
Copy link

edoko commented Apr 25, 2025

I'm also facing a similar but different problem.
In my case, when I run the inspector(dev tools) to debug iOS Safari, the developer tools stop within a few seconds.
elements, the console tab is empty and intermittently the network tab has webpack-hmr recorded last.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Webpack Related to Webpack with Next.js.
Projects
None yet
Development

No branches or pull requests

2 participants