vercel / vercel/next.js

Module incorrectly persists between hot updates (HMR) in the browser

Open
#69,098 23 comments 58 reactions 1 assignee View on GitHub

@eps1lon is already working on this.

Since Aug 20, 2024.

bug linear: next Runtime
Dominant language
JavaScript
Stars
142k
Forks
32.4k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

Link to the code that reproduces this issue

https://github.com/mswjs/examples/pull/101

To Reproduce
  1. Clone the repo, check out the PR's branch.
  2. pnpm install.
  3. cd examples/with-next.
  4. pnpm dev
  5. Open the application URL in the browser.
  6. Open the DevTools, select the "Console" tab.
  7. Click the "Fetch movies" button on the page. See the list of fetched movies (these are coming from mocks). See a single log output from MSW about the intercepted GraphQL query.
  8. Go to src/mocks/handlers.ts. Change the payload of the graphql.query() handler (e.g. remove any word from a movie title).
  9. Save the changes.
  10. Back in the browser, click "Fetch movies" again.
  11. See two logs for the same GraphQL request.
Current vs. Expected behavior

Current behavior

The entire MovieList component gets re-rendered a bunch of times on hot update to handlers.ts. Re-rendering is expected, but it looks like Next.js re-applies event listeners to the same button multiple times.

This is not an MSW issue. You can log something in the MovieList component manually, and see that it re-renders quite a lot. I suspect during those re-renderings, the onClick listener gets applied more than it needs to.

The number of times the listener is excessively applied is directly proportionate to the number of HMR changes issued (e.g. 1 change = 2 listeners; 2 changes = 3 listeners; etc).

Provide environment information
Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 23.3.0: Wed Dec 20 21:28:58 PST 2023; root:xnu-10002.81.5~7/RELEASE_X86_64
  Available memory (MB): 65536
  Available CPU cores: 16
Binaries:
  Node: 18.19.0
  npm: 10.2.3
  Yarn: 1.22.10
  pnpm: 9.6.0
Relevant Packages:
  next: 15.0.0-canary.121 // Latest available version is detected (15.0.0-canary.121).
  eslint-config-next: N/A
  react: 19.0.0-rc-14a4699f-20240725
  react-dom: 19.0.0-rc-14a4699f-20240725
  typescript: 5.3.3
Next.js Config:
  output: N/A
Which area(s) are affected? (Select all that apply)

Developer Experience, Runtime

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

next dev (local)

Additional context

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.