Module incorrectly persists between hot updates (HMR) in the browser
@eps1lon is already working on this.
Since Aug 20, 2024.
- 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
- Clone the repo, check out the PR's branch.
pnpm install.cd examples/with-next.pnpm dev- Open the application URL in the browser.
- Open the DevTools, select the "Console" tab.
- 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.
- Go to
src/mocks/handlers.ts. Change the payload of thegraphql.query()handler (e.g. remove any word from a movie title). - Save the changes.
- Back in the browser, click "Fetch movies" again.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.