Questions tagged [webpack-hmr]
343 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…
Augie Gardner
- 2,749
- 3
- 25
- 36
64
votes
8 answers
How do I open react-native's dev menu on real device
I have seen already a number of border cases and strange developer interface.
From the "shake your device", which is really impractical, specially with a tablet
To working around Android studio to simulate a button press.
Is there a consistent way…
jsdario
- 6,477
- 7
- 41
- 75
50
votes
6 answers
Webpack TypeScript module.hot does not exist
I want to enable Webpack HMR in a NodeJS project written in TypeScript.
But module.hot is not available:
@types/webpack-env defines:
declare var module: __WebpackModuleApi.Module
Which conflicts with @types/node definition:
declare var module:…
kube
- 13,176
- 9
- 34
- 38
24
votes
3 answers
Webpack - [HMR] and [WDS] firing twice
I'm getting messages like [HMR] Waiting for update signal from WDS... and [WDS] Hot Module Replacement enabled. twice in Dev Tools console. Why is that? Am I doing something wrong?
My webpack.config.js file:
...
module.exports = () => {
…
Jan Chalupa
- 887
- 1
- 9
- 27
24
votes
2 answers
Redux Saga hot reloading
I was working on a React & Redux project. The project used to use webpack-dev-middleware and hot middleware to hot reload.
After I added Redux Saga to the project, and added saga middleware to the redux store. It seems that whenever I change the…
Kevin He
- 871
- 7
- 18
23
votes
2 answers
Invalid HMR message error Webpack
I'm getting the following error from Webpack:
Invalid HMR message Followed by a string of very detailed JSON.
There really aren't any resources that I can find to better debug this. Any tips?
Bonus if anyone can give me insight to why require can't…
John Doe
- 3,559
- 15
- 62
- 111
18
votes
2 answers
How to preserve state during HMR using Angular
In Angular, is there a way to preserve application state after a module has been hot reloaded? Similar to what happens in VueJS:
So far I've gotten HMR to work following several tutorials, but all it does is reload the app without doing an actual…
Shane
- 827
- 8
- 18
16
votes
2 answers
Is it possible to use Webpack-Hot-Middleware with NGINX on server side?
I am working on a project for a client and I need to use webpack's Hot Module Replacement feature. I am using an express (node) application behind NGINX. I am using many javascript frameworks to design the application, React happens to be one of…
Sumit Lahiri
- 505
- 6
- 13
16
votes
4 answers
Why does production build of React app (with Webpack and Babel) use wrong development env with HMR, which causes errors?
I'm trying to create a production build of my React project, but it picks the wrong configuration.
In the development version I'm using HMR (Hot Module Replacement). This is configured in .babelrc, under env > development > plugins.
When adding an…
Micros
- 5,966
- 2
- 28
- 34
13
votes
2 answers
Page styles break when I change styles in Chrome DevTools with Webpack HMR
I have a strange problem:
I'm using Webpack (with Vue-CLI) + HMR.
When I try to change styles in the browser in DevTools, then my page itself changes the styles - it removes some of them (screenshots below).
I understand that the problem is in the…
Evgeniy Novalov
- 153
- 7
13
votes
1 answer
How to profile time consuming part in webpack build
I have a small VUE project with 25 entries which is created by vue-cli.
During the development, when HMR is on, the rebuild time is about 10s now.
I use --profile --progress to start webpack-dev-server and the output is as following:
webpack:…
xi.lin
- 3,326
- 2
- 31
- 57
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…
Adidi
- 5,097
- 4
- 23
- 30
12
votes
6 answers
Is there a way in webpack watch mode to display on screen the timestamp when webpack last updated the build?
Sometimes while running webpack in watch mode and editing source files I am not sure whether webpack has packed my changes or not.
Is there a way to print a timestamp to the console each time webpack updates the bundle?
Bjorn Reppen
- 22,007
- 9
- 64
- 88
12
votes
2 answers
How to get sourcemaps working for React Css Modules?
I'm trying to setup a React project with react-css-modules, webpack and Hot Module Replacement. Everything is working like a charm but I can't get the CSS sourcemaps to work.
I followed this guide to make HMR work. It involves a BrowserSync setup to…
Tieme
- 62,602
- 20
- 102
- 156
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