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
4
votes
1 answer

Running ng server with --hmr still causes page to reload on changes

I just upgraded my application to Angular ^11.0.2 and wanted to try the --hmr option on the CLI. From the CLI it looks like it is enabled though when performing a change to a page it is still completely refreshed in the browser. When compiling the…
Nicholas
  • 1,189
  • 4
  • 20
  • 40
4
votes
0 answers

HMR - Update check failed: Error: Manifest request to url timed out

Trying to setup HMR but running into this error: [HMR] Update check failed: Error: Manifest request to http://localhost:8080/bdfcd3cc99a34de2ac8c.hot-update.json timed out. at XMLHttpRequest.request.onreadystatechange GET…
Batman
  • 5,563
  • 18
  • 79
  • 155
4
votes
1 answer

Inline import export component throwing error on hot reloading

For context, let me try to explain a little more. In my project I have a folder, as example, for components. Inside that folder I have my components files, and an index.js file where I import all the components and export than in the same line as…
Kaleb Portilho
  • 1,181
  • 16
  • 20
4
votes
1 answer

webpack 4 aspnetcore 2.2 HMR not reloading in browser

I'm unable to rule out a compatibility issue with aspnetcore 2.2 and webpack 4 or a configuration issue on my end. I need some help spotting the configuration issue if that is the cause. ASPNETCORE 2.2 WEBPACK 4 When I make a change to a ".tsx"…
proggrock
  • 3,239
  • 6
  • 36
  • 51
4
votes
1 answer

TypeScript type for module name string

Background: TypeScript checks the modules that you try and import, and fails at compile-time if a string literal is used that does not match the name of an actual module or path to a supported file type. For example import {Component} from 'react'…
Ozymandias
  • 2,533
  • 29
  • 33
4
votes
0 answers

HMR not working in .Net Core 2.0 - Angular 5 new Single-App Template (angular/cli based)

I'm trying to create a new app with the new spa-templates from Microsoft, but HMR (Hot Module Replacement) is not working. I tried this. . Install the SPA templates: dotnet new --install…
beetle
  • 41
  • 2
4
votes
0 answers

Hot Module Replacement with Webpack, Express & Babel (babel-loader) not working with React Components (Error: Ignored an update to unaccepted module)

I am new to React webpack and such and I am trying to implement Hot Module replacement into my workflow. I am using webpack, express, Babel ES6 with React and I believe I have all the loaders that i need. I have got HMR working for my CSS files and…
Daniel Takyi
  • 159
  • 1
  • 9
4
votes
3 answers

Listen for hot update events on the client side with webpack-dev-derver?

This is a bit of an edge case but it would be helpful to know. When developing an extension using webpack-dev-server to keep the extension code up to date, it would be useful to listen to "webpackHotUpdate" Chrome extensions with content scripts…
Joel Kelly
  • 177
  • 3
  • 11
4
votes
1 answer

Angular2 RC5 WebPack ngRx Hot Module Replacement

I have previously used the approach found here to get HMR working with RC4 to maintain ngRX state when using Webpack. With RC5 and ngModules the bootstrapping process has changed and I am struggling to see how I can adapt the previous approach to…
Monkeeman69
  • 502
  • 2
  • 5
  • 18
3
votes
0 answers

Reflect changes as they are saved using webpack-hot-middleware with node

I am trying to get 'webpack-hot-middleware' to work with a node server. I created a sample application using typescript with an endpoint localhost:3000/ that console logs 'Hello endpoint'. When I change this text, and visit the endpoint again, I…
J. Lemein
  • 81
  • 1
  • 4
3
votes
1 answer

Ignore coverage HTML files from Vite + React HMR

I have a project set up using vite with the @vitejs/plugin-react extension. I'm using the basic config of export default defineConfig({ plugins: [react({ include: ['src'] })] }) In the dev server output I'm seeing page reloads of my coverage HTML…
knueser
  • 357
  • 3
  • 14
3
votes
0 answers

Uncaught Error: [ProxyFacade] is not a component. All component children of must be a or

I am using webpack with router v6 import React from 'react'; import { hot } from 'react-hot-loader'; import Layout from '@cmp/Layout'; import Main from '@pages/Main'; import { BrowserRouter as Router, Routes, Route } from…
vigneshwaran
  • 41
  • 3
3
votes
3 answers

npm run watch/hot only successful on the first run

Background: I added TypeScript support to my existing project, so I added ts-loader and typescript. I think, I configured everything right and it is working fine in dev and prod mode. I would like to update gradually, keeping all the JavaScript code…
Darkproduct
  • 1,062
  • 13
  • 28
3
votes
0 answers

Can I have HMR (hot module replacement) with Routify?

How can I use Svelte HMR with Routify, notably in the Routify starter, that has a somewhat special Rollup config?
rixo
  • 23,815
  • 4
  • 63
  • 68
3
votes
0 answers

HMR does not work for some projects in nrwl nx

I have a react application with some libraries like a seperate UI components library configured with nx. HMR doesnt work for ui library project. When I make a change to the components in the folder declared as projectType:"application" in…
trkaplan
  • 3,217
  • 2
  • 23
  • 26
1 2
3
…
13 14