Stack Overflow
Stack Overflow

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
8
votes
2 answers

The following modules couldn't be hot updated: (Full reload needed)

I'm trying to setup hot module reloading in a react/typescript (with TSX) environment. I have used the react/redux real-world example as a model in getting things going, and this is what I have so far: server.js var webpack = require('webpack') var…
drewwyatt
  • 5,989
  • 15
  • 60
  • 106
7
votes
2 answers

Create-React-App loses Redux store state on hot reload

I've created an app with Create-React-App and hot reloading is working, however the Redux state is lost. If I edit any component, e.g. to change a title, the state is lost - most annoying is that the user is logged out because the token stored in…
Little Brain
  • 2,647
  • 1
  • 30
  • 54
7
votes
2 answers

How can set up my Vue.js site to clear the browser's Javascript console on every hot reload event?

I have a Vue.js site with Webpack Dev Middleware (served via an ASP.NET Core site by HTTP.sys web server, though I'm guessing that doesn't matter). Does anyone know how I can set up my site to clear the browser's Javascript console on every hot…
Patrick Szalapski
  • 8,738
  • 11
  • 67
  • 129
7
votes
0 answers

Enabling Hot Module Replacement with Angular 2 Upgraded App

We're using the upgrade adapter to setup an Angular 1/2 Hybrid app. We're bootstrapping the app like this (As described in the Angular docs https://angular.io/guide/upgrade): class AppModule { constructor(private upgrade: UpgradeModule) { } …
DaftMonk
  • 955
  • 7
  • 9
7
votes
2 answers

webpack-dev-server --hot vs HotModuleReplacementPlugin()

With the following config, I have been able to get hot module replacement working with HotModuleReplacementPlugin(), but not by using --hot when running the webpack-dev-server. My question is, why? Almost all recent guides to setting up hot module…
jonofan
  • 371
  • 2
  • 5
  • 14
6
votes
1 answer

React Rails with Webpacker not hot reloading

I've added react-rails to an existing project that we're slowly migrating over to react. Current webpacker.yml default: &default source_path: app/javascript source_entry_path: packs public_output_path: packs cache_path:…
Matt Coady
  • 3,418
  • 5
  • 38
  • 63
6
votes
1 answer

Hot reload on vue-loader only works with structural changes to the template

I've setup vue + vue-loader + HMR on an existing project. It works mostly well, vue components are loaded and rendered correctly. The hot module reload part is configured and loading. However, it doesn't seem to apply updates when the change is…
Ben
  • 20,737
  • 12
  • 71
  • 115
5
votes
0 answers

How to let Webpack HMR work with Typescript monorepo on a npm workspace

I'm trying to determine how to switch our projects and libraries in a typescript monorepo using npm workspace. After some coding on a test structure I've been able to obtain an unsustifying working solution. The project structure is like this…
Massimo
  • 91
  • 4
5
votes
1 answer

Why is module.hot.accept handler not called?

I setup HMR in my project and it works fine for most of my application (electron, webpack, react). Only issue: the module.hot.accept callback is never called, so for hot-replacing my data stores, it does not work. I actually wonder that HMR works…
stoefln
  • 14,498
  • 18
  • 79
  • 138
5
votes
1 answer

How to I get hot module reloading to work in a typescript monorepo

So I've been trying for the last few days completely in vain to get hot module reloading working in my Typescript/React/Koa/Mongo based monorepo; I feel like I've been banging my head against a brick wall. The documentation for HMR is pitiful…
Ben Wainwright
  • 4,224
  • 1
  • 18
  • 36
5
votes
1 answer

Angular. [HMR] Cannot apply update. Need to do a full reload

I'm add HMR (stories configure hmr) to my Angular project, but instead hot reloading i'm getting it full reload. Updated to angular 8, the problem is not solved. [HMR] Cannot apply update. Need to do a full reload! ... [HMR] Error: Aborted because…
Анатолий Деревьев
  • 51
  • 3
5
votes
2 answers

webpack-dev-server 404 & how to set it up correctly?

Where I'm coming from I've been working with webpack for quite a while now but this is the first time I'm not modifying a starter kit for it, trying to set up everything from ground up. I followed along this nice article on survivejs.com and…
Marian
  • 1,352
  • 4
  • 15
  • 28
4
votes
0 answers

How do I get HMR (Hot Module Replacement) working with a TypeScript React Monorepo in Vite

I've got a React monorepo (build in TypeScript) and I've recently been switching over from Webpack to Vite. However I'm having real difficult in getting HMR working correctly within Vite (I believe because we separately build our packages). I'm open…
Ian
  • 33,605
  • 26
  • 118
  • 198
4
votes
0 answers

Vite HMR doesn't preserve state in Vue 2 after component update

When editing a component, the vue data state will reset after an hmr update.