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

Angular CLI HMR with Lazy-Loaded routes hot-reloads the whole thing

(Confirmed an issue even with Angular 7). Let's get this fixed! I'm using HMR as set up here: https://github.com/angular/angular-cli/wiki/stories-configure-hmr from a fresh ng new build. If I change any component and make it lazy loaded, angular…
25
votes
1 answer

What are the conceptual differences between live reloading, hot reloading, and hot module replacement?

I've seen a lot of posts and publications about live reloading, hot reloading, and hot module replacement, referring to different practices to reflect changes in code immediately in the browser when working in the web client/FE layer. I have a fair…
Amy Pellegrini
  • 3,200
  • 1
  • 13
  • 19
17
votes
2 answers

Hot Module Replacement is reloading whole app instead specific component

I created a new angular project and set up HMR as explained here: https://github.com/angular/angular-cli/wiki/stories-configure-hmr The project contains main component (parent) which has router-outlet and links to 3 child components which are lazy…
Ron
  • 3,975
  • 17
  • 80
  • 130
14
votes
0 answers

Angular CLI Hot Module Reload

I followed this github story: https://github.com/angular/angular-cli/wiki/stories-configure-hmr I am able to see changes after auto-refresh when I do ng serve (environment is Dev), however with ng serve --hmr -e=hmr, the page auto refreshes (like a…
Moshe
  • 2,583
  • 4
  • 27
  • 70
13
votes
3 answers

Webpack dev middleware react hot reload too slow

I have a simple configuration with webpack-dev-middleware and webpack-hot-middleware that uses Hot reload (HMR) with react. Everything is working fine except that every change i made to the code it takes up 2 3-4 seconds !!! till I see it in the…
12
votes
2 answers

Webpack-dev-server CORS error with credentials

I'm getting CORS problems with hot module reloading - dev server. I'm using the dev-server on port 3000 but the application is served from another port http://localhost:52024/. This is the error I'm getting (Chrome, Windows 10): GET…
12
votes
4 answers

Uncaught Error: [HMR] Hot Module Replacement is disabled

I'm using webpack for my build which works without any problems using the webpack-dev-server (npm run watch), however when I try to create a production build (npm run build) I seem to get the error in the console when I try to load the website and…
user843337
11
votes
1 answer

How do I hot reload a module wrapped in a native import context?

I have the following function a file @/lang/index.js: async function fetchMessages(locale) { const module = await import(/* webpackChunkName: "lang/[request]", webpackExclude: /index/ */ `@/lang/${locale}`) return module.default } I…
matpie
  • 17,033
  • 9
  • 61
  • 82
11
votes
0 answers

Angular 7+: HMR (Hot Module Replacement) does not work if any route-resolve involved

HMR (Hot Module Replacement) is a great functionality, that works properly if no "Route-resolve" (see below) is present. If I remove resolve here: { path: 'new', component: BookNewComponent, data: { breadcrumb:…
user3025289
11
votes
2 answers

Unable to HMR (Hot Module Replacement) css/scss with Webpack 2.2.0 and webpack-dev-server 2.2.1

Versions "extract-text-webpack-plugin": "^2.0.0-rc.2", "webpack": "^2.2.0", "webpack-dev-server": "^2.2.1" Issue "extract-text-webpack-plugin": "^1.0.1", "webpack": "^1.14.0", "webpack-dev-server": "^1.16.2" No longer able to HMR css/scss since…
11
votes
3 answers

Hot module replacement - Updating but not re-rendering

I am running an express server that will act as an API for my React app that is being bundled and served by webpack-dev-server. I am trying to get hot module replacement to work, and am almost there, when I make changes to my files, I get this in…
10
votes
5 answers

Hot module replacement for native ES Modules (browser or Node.js) *without* Webpack? No build tools

I'm looking to add HMR to plain Node.js code or browser code written with native ES Modules. There's no Babel, no Webpack, no transpilation, just plain JS files and ES Module import and export calls. Can we do HMR in plain Node or browser?
trusktr
  • 44,284
  • 53
  • 191
  • 263
10
votes
1 answer

source map's in mini-css-extract-plugin

I can't seem to get source maps to work with the mini-css-extract-plugin. I had them working with style-loader. devtool: argv.mode === 'development' ? 'eval' : 'none', [...] test: /\.scss$|\.css$/i, use: [ { loader:…
9
votes
1 answer

HMR fails with Angular 9 + IVY: Type AppComponent is part of the declarations of 2 modules: AppModule and AppModule

Affected Package HMR + IVY Is this a regression? pre-IVY, it works Description Seems IVY and HMR don't play well together? However I've seen tickets of them that are closed so I suppose it should be possible. I have on re-load after code…
1antares1
  • 1,146
  • 2
  • 11
  • 19
9
votes
1 answer

Yarn Workspaces And Webpack Hot Module Reloading React App

I am using Yarn Workspaces to manage a mono repo. I am using webpack 4 for hot module reloading. In my mono repo I have an app, a UI component library, and another component library for authorizing users (auth package). I am using the component…
pizzarob
  • 11,711
  • 6
  • 48
  • 69
1
2 3
13 14