Stack Overflow
Stack Overflow

Questions tagged [webpack-hot-middleware]

Webpack-hot-middleware refers to the module that concerns only the mechanisms of connecting a browser client to a JavaScript module bundler Webpack server and receiving its respective updates, meaning being able to use the technique of keeping the app running and injecting new versions of the files that one edits at runtime, a.k.a hot reloading, without using webpack-dev-server. Use this tag for questions related to this webpack module.

Webpack-hot-middleware refers to the module that concerns only the mechanisms of connecting a browser client to a JavaScript module bundler Webpack server and receiving its respective updates, meaning being able to use the technique of keeping the app running and injecting new versions of the files that one edits at runtime, a.k.a hot reloading, without using webpack-dev-server. Use this tag for questions related to this webpack module.

85 questions
158
votes
40 answers

Webpack: "there are multiple modules with names that only differ in casing" but modules referenced are identical

I'm using webpack 3.8.1 and am receiving several instances of the following build warning: WARNING in ./src/Components/NavBar/MainMenuItemMobile.js There are multiple modules with names that only differ in casing. This can lead to unexpected…
achalk
  • 3,229
  • 3
  • 17
  • 37
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
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
10
votes
1 answer

Simplest way to hot reload a CSS file in Webpack using Webpack Dev Middleware

I have a project written in TypeScript that I can take advantage of Webpack Hot Reload, using both webpack-hot-middleware and webpack-dev-middleware libraries in my Node.js server. Also, I already have all the build steps configured for my Stylus…
Buzinas
  • 11,597
  • 2
  • 36
  • 58
9
votes
1 answer

Hot reloading breaks the app. Final loader didn't return a Buffer or String

I have a custom loader that load the following file data.js const data = { a: ()=> 8885555, b: ()=> 55555 } module.exports = name => { return data[name] && data[name]() } when I change the above file like changing b value the…
evgeni fotia
  • 4,650
  • 3
  • 16
  • 34
7
votes
0 answers

How to reference in-memory bundle from webpack-dev-middleware / webpack-hot-middleware

I'm implementing Webpack into a legacy Express frontend application. I've followed the instructions to implement both webpack-dev-middleware and webpack-hot-middleware, but I can't figure out how to actually reference the in-memory bundle that…
tomtom
  • 1,130
  • 2
  • 11
  • 35
7
votes
2 answers

How to output .html to disk using Webpack-dev-server and HTML-webpack-plugin

I use webpack and html-webpack-plugin to update my index.html file with the generated script bundle, such as bundle.[hash].js. Then I have to run webpack-dev-server so I can load that bundle into memory and take advantage of Hot Module…
TetraDev
  • 16,074
  • 6
  • 60
  • 61
6
votes
0 answers

How to enable hot reload when using Webpack in watch mode and Firebase emulators:start

I'm starting off a new project and I though it would be nice to use the full firebase emulators suite. Se here's what I've thought could work: // THIS IS MY package.json SCRIPT "start-firebase-build": "set NODE_ENV=development_firebase&& webpack…
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
5
votes
1 answer

Can't get a multi-app webpack configuration to work with react-hot-loader

I have a basic setup with two apps each in a separate directory, I'm using a custom server to compile them using webpack-dev-middleware/webpack-hot-middleware. Things are working fine except that I can't get HMR to work for the second app (I'm using…
Amr Noman
  • 2,597
  • 13
  • 24
5
votes
2 answers

React Developer Tools says 'Proxy Component' instead of the name of the component

I am using Webpack with Hot Module Reloading. I also use the chrome extension React Developer Tools to inspect the react tree while developing. When I inspect the page and look at the component tree, I would like to see the name of the actual…
fresh5447
  • 1,242
  • 3
  • 14
  • 27
4
votes
0 answers

webpack-hot-middleware only updates Css/Sass Once

I have a problem with webpack-hot-middleware and I'm not sure what I'm doing wrong. In summary: Everytime I run the command node./ dev webpack runs and start to monitoring changes. This part is working great. When I change my src / assets / js /…
Clyff
  • 4,046
  • 2
  • 17
  • 32
4
votes
0 answers

Module not found: Error: Can't resolve 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true' when using webpack-hot-middleware

I am using webpack-hot-middleware for hot module replacement for javascript ui scripts in an express app. Whenever I start the server, I get this error: Module not found: Error: Can't resolve…
Ben Lloyd
  • 41
  • 1
  • 2
4
votes
0 answers

How to load the js generated from webpack-dev-middleware and start that js

I am new to Node JS. I am working on creating a Backend API server with hot reloading by using webpack-hot-middleware. I try to use webpack-dev-middleware to load the server script (index.js) to the memory and execute that javascrip t file. Here is…
Danny Pang V
  • 140
  • 1
  • 1
  • 11
4
votes
0 answers

How to use React only at server side?

I decided to give a shot at just using React only for server side rendering of my components written in JSX. I decided to eliminate React on the client side as there is not much client side interaction and I thought of adding it later only if…
Ranjith Nair
  • 475
  • 1
  • 6
  • 17
4
votes
2 answers

Jest test fails when environment is configured with webpack-hot-middleware

So I'm running a very basic Jest test to test if one of my routes returns a 200. import request from 'supertest'; import app from './../app'; describe('GET /', () => { it('should render properly', async () => { await…
Chris Pena
  • 374
  • 1
  • 4
  • 10
1
2 3 4 5 6