gitmyhub

webpack-hmr-repro

JavaScript ★ 32 updated 3y ago

This repository documents a bug in webpack's Hot Module Replacement (HMR) feature. HMR is a development tool that lets you edit code and see changes instantly in your browser without a full page refresh — it's a huge productivity boost when building web apps.

The bug happens in a specific scenario involving how modules re-export code from each other. Imagine you have three JavaScript files arranged like a chain: file A re-exports everything from file B, file B re-exports everything from file C (plus adds its own export), and file C has its own function. When you're working on an unrelated part of your code and save a change, webpack's HMR should only reload the file you actually edited. Instead, it incorrectly includes file A in the reload list, even though A never changed. This causes the browser to do a full page refresh instead of a hot update, breaking the smooth development experience.

The quirk is that this only happens on the first HMR update after starting the development server. After that first reload, HMR works fine. So it's not a permanent breakage, but it's annoying because it means the first save after you start development always causes a jarring full refresh.

The repository serves as a minimal reproduction case — a small, focused example that developers at the webpack project can use to understand and fix the bug. It includes the exact file structure and step-by-step instructions to trigger the issue, which helps whoever is debugging it isolate the root cause. This is a common pattern in open-source projects: when you find a bug, you create a "repro" (short for reproduction) to document it clearly so maintainers can work on a fix without having to guess what the problem is.