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
0
votes
0 answers

What does "hot module" mean exactlyl from "HMR"?

I am wondering what is an exact unit of "hot module" from "Hot Module Replacement". I kinda know what "module" means in a general term, but what is exactly "hot module"? Thank you.
NhLe
  • 57
  • 5
0
votes
2 answers

NextJS isn't updating when pages/containers/components are changed, HMR always returns success

I'm having an issue with NextJS/webpack. Whenever I make changes, it won't update anything until a full restart of everything. This takes a really long time to compile, most recently 6.4 seconds for the client and 2.3 for the server. Often it has…
user2170889
  • 1
  • 1
0
votes
1 answer

Unable to reload with Express + Webpack Dev Middleware + Webpack Hot Middleware

I've been trying to perform Hot Module Replacement forever with the above setup; with failure. Here's my Webpack Configuration export default { entry: [ DEVELOPMENT && "webpack-hot-middleware/client", PATH.SOURCE …
Achilles Gasper Rasquinha
  • 3,339
  • 1
  • 11
  • 16
0
votes
1 answer

content does not change using HotModuleReplacementPlugin

First problem : Trying HMR example given in webpack documentation in this link : https://webpack.js.org/guides/hot-module-replacement/. As mentioned in title : "Gotchas", i tried removing child which was added when app loads for the first time,…
rosnk
  • 1,068
  • 1
  • 14
  • 36
0
votes
1 answer

Webpack hot module replacement on docker/macOS recompile error

I am using docker in my dev environment with hot module replacement on macOS. I can run my app successfully and when changing files webpack hot reloading actually picks up the change. However, the recompile always fails at this step with the…
Gegenwind
  • 1,388
  • 1
  • 17
  • 27
0
votes
0 answers

Why does this basic webpack hot module replacement work?

I tried the very basic HMR(without react-hot-loader) using webpack after reading this Medium post by Dan Abramov. Entry index.js import React from 'react'; import { render } from 'react-dom'; import App from './App'; if(module.hot) { // Basic…
Abhimanyu Pathania
  • 335
  • 2
  • 7
  • 18
0
votes
1 answer

webpack-dev-server Inline mode on CLI hot module reload page will refresh for change dom

When I change dom, page will refresh, but change css, hmr works, page not refresh, will hot replacement. I want the page will not refresh instead of hot replacement when i change dom global webpack version 3.3.0, Mac OS 10.11.6 this is my…
Ming Ye
  • 1
  • 1
0
votes
0 answers

HMR is not reloading on changes outside /src

I have a shared folder where reusable React components are stored. I want to make Hot Reload working with that directory, but it doesn't work. Here is the folder structure I have: |__shared |__src |__package.json Somehow Webpack…
alex.mironov
  • 2,834
  • 6
  • 27
  • 41
0
votes
1 answer

Having an issue when configuring HotModuleReplacement in webpack 2

I'm trying to integrate HotModuleReplacement and following this boilerplate, but is not working with my webpack configuration. The "issue" I am having is in the output.publicPath entry. Following the example I mentioned, that line is "necessary for…
esausilva
  • 1,964
  • 4
  • 26
  • 54
0
votes
1 answer

How to run Webpack Hot Module Replacement (HMR) in Production

Id like to run HMR in production, using it for seamless application updates. I cannot seem to find any docs or tutorials regarding how to do this. My setup is currently "serverless", and statics are served from AWS S3. My first thought is i would…
donny5561
  • 21
  • 4
0
votes
0 answers

HotModuleReplacementPlugin and react-hot-loader both failing

It's been blowing my mind figuring out the solution for these webpack.config.js issues I have. In the entry property, it says it can't find the directories defined; i tried to prepend ./node_modules/ since the packages are located in the…
user7522621
0
votes
1 answer

Webpack HMR doesn't work with Node-Webkit/NW.js

What I have I created a small Webpack HMR Hello World with the following config file: const path = require('path'); const webpack = require('webpack'); module.exports = { entry: { app: path.join(__dirname, 'app/index.js'), }, output: { …
totymedli
  • 29,531
  • 22
  • 131
  • 165
0
votes
1 answer

Webpack react HMR without router

I need to start react js project without react-router, but I cannot setup hot module replacement without that one, please can you help me. My server const app = express() // Apply gzip compression app.use(compress()) if (project.env ===…
Dmitriy Kovalenko
  • 3,437
  • 3
  • 19
  • 39
0
votes
1 answer

Webpack 2 HMR on Preact App

I'm trying to setup Hot Module Reloading with Webpack 2 and Preact. It's "working", in that it's reloading the entire contents of the app every reload, but I'm getting errors between hot reloads (and I think that's why individual components aren't…
Ruben Martinez Jr.
  • 3,199
  • 5
  • 42
  • 76
0
votes
2 answers

Hot module reload with browserify, redux and react-route

I prefer browserify over webpack but there's a problem in browserify environment I can't fix. I'm using react, redux and react-route and I'm willing to have hot module reload like what react-hot-loader offers to webpack environment. I'm using…
Sassan
  • 2,187
  • 2
  • 24
  • 43
1 2 3
…
13
14