🔥 Hot Module Replacement

Hot Module Replacement (HMR) improves the development experience by automatically updating modules in the browser at runtime without needing a whole page refresh. This means that application state can be retained as you change small things. Parcel's HMR implementation supports both JavaScript and CSS assets out of the box. HMR is automatically disabled when bundling in production mode.

As you save files, Parcel rebuilds what changed and sends an update to any running clients containing the new code. The new code then replaces the old version, and is re-evaluated along with all parents. You can hook into this process using the module.hot API, which can notify your code when a module is about to be disposed, or when a new version comes in. Projects like react-hot-loader can help with this process, and work out of the box with Parcel.

There are two methods to know about: module.hot.accept and module.hot.dispose. You call module.hot.accept with a callback function which is executed when that module or any of its dependencies are updated. module.hot.dispose accepts a callback which is called when that module is about to be replaced.

if (module.hot) {
  module.hot.dispose(function() {
    // module is about to be replaced

  module.hot.accept(function() {
    // module or one of its dependencies was just updated

Automagically installed dependencies

Whenever Parcel comes across a dependency that fits the node_module pattern and can't find it, Parcel tries to install this dependency using yarn or npm depending on finding a yarn.lock file or not. This prevents the developer from having to exit parcel or having multiple terminal windows open.

This only occurs in development (using serve or watch), however in production (using build) autoinstall is disabled to prevent unwanted side-effects on deployment.

You can disable this feature using --no-autoinstall.

Safe Write

Some text editors and IDE's have a feature called safe write that basically prevents data loss, by taking a copy of the file and renaming it when saved.

When using Hot Module Reload (HMR) this feature blocks the automatic detection of file updates, to disable safe write use the options provided below:

Help us improve the docs

If something is missing or not entirely clear, please file an issue on the website repository or edit this page.