Skip to content

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

@kettanaito

Description

@kettanaito

Link to the code that reproduces this issue

mswjs/examples#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

Metadata

Metadata

Assignees

Labels

RuntimeRelated to Node.js or Edge Runtime with Next.js.bugIssue was opened via the bug report template.linear: nextConfirmed issue that is tracked by the Next.js team.

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions