Questions tagged [hot-module-replacement]

hot module replacement means code changes appear instantly in the browser without the need to rebuild the entire app.

Intro

“Hot Module Replacement” (HMR) is a feature to inject updated modules into the active runtime.

It’s like LiveReload for every module.

HMR is “opt-in”, so you need to put some code at chosen points of your application. The dependencies are handled by the module system. HMR is popularly used by webpack.

Questions

  • Usage of HMR and code implementation.
  • Trouble in implementing the concept in your code.
  • Trouble using it with webpack or other bundlers.
  • Unexpected behavior while using HMR.
  • Basically, any HMR related questions!

Useful links

197 questions
2
votes
4 answers

Vite HMR suddenly reloading full app on every minor save in Vue 3

Stack: Vue 3 (Options API) Vite TailwindCSS Context: I've been working on this app for months. If I changed something minor such as a computed property or style, the component would update but the page wouldn't. As of today, suddenly the entire…
Bob Bass
  • 127
  • 2
  • 16
2
votes
1 answer

How to configure ngnix, vite and laravel for use with HMR via a reverse proxy?

I've only just got into Laravel/Vue3 so I'm working off the basics. However, I have an existing Docker ecosystem that I use for local dev and an nginx reverse proxy to keep my many projects separate. I'm having trouble getting HMR working and even…
Reuben
  • 4,136
  • 2
  • 48
  • 57
2
votes
2 answers

Vite React TypeScript monorepo hot module reloading (HMR) not working

I have a Vite/React/Typescript/Yarn monorepo that contains two applications and some shared components. I'm having trouble getting HMR working when running vite dev. The example repo is here: https://github.com/jakeboone02/em-hmr-test. If you run…
Jake Boone
  • 1,090
  • 1
  • 11
  • 19
2
votes
0 answers

How webpack HotModuleReplacementPlugin works and what does it do?

(I'm not good at English, if there is any problem that I did not describe clearly, please remind me to modify), I often see some questions or articles about why webpack hmr does not work or why my webpack dev server config is invalid or how to…
2
votes
1 answer

Angular 12.0.5 HMR is not working, not reloading modules, not reloading page (live reload), Angular 11.0.6 reloads full page

Angular HMR not replacing/reloading components Live Reload works for 11.0.6 and 12.1.0-next.6. Angular 12.0.5 does not reload at all. Anyone out there who got this working and can provide a working sample app? Given : A simple starter app (from…
JimiSweden
  • 744
  • 10
  • 13
2
votes
0 answers

Hot Module Replacement not reloading on updating html content, but reloads on css and js on webpack 5

Here is my settings for webpack and packages json . I am using 2 entry points for html files. Somehow HMR reloades page with css and js changes, but not with html content changes. I've tried a lot of suggestions from stackoverflow and github issues,…
2
votes
1 answer

Hot Module Replacement '[HMR] Waiting for update signal from WDS...' forever, how to enable Hot Module Replacement?

Hot Module Replacement '[HMR] Waiting for update signal from WDS...' forever, how to enable Hot Module Replacement or send signal from Webpack Dev Server? I want Hot Module Replacement be enabled. Therefore, I set hot: true in webpack.config.js. I…
ibocon
  • 1,352
  • 3
  • 17
  • 40
2
votes
0 answers

Webpack HMR browser not outputting hot-update.json

I'm running webpack with the --watch command to compile my browser code with the webpack.HotModuleReplacementPlugin. It seems that it keeps looking for a http://localhost/3df194f7935a8d2781e4.hot-update.json which doesn't get generated until the…
k2snowman69
  • 1,849
  • 1
  • 14
  • 19
2
votes
0 answers

Hot reload is not working with Blazor app

So I watched this demo from Steve Sanderson (https://youtu.be/MiLAE6HMr10?t=2018) where he makes changed to his files and the change is instantly reflected in the front-end. I cannot get this to work on my machine. I have tried creating a Blazor…
PalBo
  • 2,203
  • 3
  • 22
  • 43
2
votes
0 answers

React Native - Expo - WebPack Hot Module Replacement Plugin Problem

I'm using Expo with React-Native and have a problem when I edit a file. When it is running, every time I save a file modification, npm fails. The error: Compiling... build [======== ] 40%TypeError: compilation.getPathWithInfo is not a…
2
votes
2 answers

Webpack Live Reload is always one step behind

I've just integrated "Webpack" into my newly created Angular project. Question: 1) After running the command "npm run start", the web can be displayed properly. However, upon modifying my files, the web does refreshes itself, but the changes are…
2
votes
0 answers

Is it possible to enable HMR on a shopify rails app using react webpacker?

I want to speed up development time when creating shopify apps. A lot of my time is spent waiting for the page to reload through the ngrok portal so I can see my changes. I want to enable HMR so the reload happens a lot faster. I am currently using…
2
votes
0 answers

How do I start the electron main process with webpack 4 and enable hot module replacement?

I'm creating an electron application and want to have hot module replacement to work for both main process. I've tested a few different webpack config ideas with no luck. I have the renderer working with the webpack dev server. webpack base…
2
votes
0 answers

Hotmodule autoreload chrome from vagrant-vm without ssh-tunnel

I have a Vagrant VM running in Oracle VM Virtualbox with a webpack installation. The Hot-Module Autoreload Feature for the browser is working when I expose the Webpack-Node Server to 127.0.0.1:8080 and then ssh-tunnel into ssh -L 8080:localhost:8080…
2
votes
0 answers

Webpack Hot Reload very slow

I'm quite new to Webpack and when I initially set it up with my project it was working great but it seems to have got much slower as my project has progressed (maybe because more and more packages get included?). It's now taking over 1 second…
Andy Furniss
  • 3,814
  • 6
  • 31
  • 56