Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

HMR failing before dev build

See original GitHub issue

Bug report

Describe the bug

When a browser tab is open whilst running next dev, I think next is attempting to hot update something before being built causing an error.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Have browser tab open on http://localhost:3000
Run next dev
First req.url is /_next/static/webpack/xxxxxxxxxxxx.hot-update.json which does not exist in filesystem
Output shows event - build page: /404
Browser tab reloads
Page is then built event - build page: /

Expected behavior

No attempt to HMR before page is built.

Screenshots

next-hot-update-issue

I have outputted the req.url in between the next logs

System information

OS: WSL2 on Windows10
Browser: chrome
Version of Next.js: 9.5.3
Version of Node.js: 12.18.1

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:7 (6 by maintainers)

Top GitHub Comments

1reaction

minlarecommented, Sep 7, 2020

@felixmosh - I cannot reproduce by using a <Link> to the current page…

0reactions

balazsorban44commented, Jan 27, 2022

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

Top Results From Across the Web

webpack dev middleware, how to autoreload when HMR fails

You can pass parameter reload to webpack-hot-middleware/client : entry: { main: [ 'webpack-hot-middleware/client?reload=true', '.

Understanding webpack HMR beyond the docs - Jakob Lind

The development server is responsible for listening on the file system for code changes and trigger a new build whenever there is new...

The State of HMR in Angular - JavaScript in Plain English

HMR is only useful on dev builds. While we experiment debugging with HMR, it is a good idea to create a new script...

Troubleshooting - Vite

See https://vitejs.dev/guide/troubleshooting.html#_431-request-header-fields-too- ... If HMR is not handled by Vite or a plugin, a full reload will happen.

Webpack's Hot Module Replacement Feature Explained

When a hot update failed to replace the code in the browser, the HMR runtime will let webpack-dev-server know. The webpack-dev-server will ...