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

Webpack Hot Module Reloader not working with React Stateless Component

I am having a bit of trouble with webpack-dev-middleware not hot reloading using a react stateless function, but working fine if I create a class extending component. For instance, this works perfectly. // home.js import React from 'react' export…
JeremyC
  • 241
  • 4
  • 14
3
votes
1 answer

Turn off webpack-hot-middleware client overlay in Nuxt application

I'm trying to turn off the overlay from webpack-hot-middleware in my Nuxt application. I tried editing the config in nuxt.config.js but the overlay persists. build: { // turn off client overlay when errors are present hotMiddleware: { …
Enaud
  • 33
  • 1
  • 4
3
votes
0 answers

Webpack 4 Extracted SCSS Hot-Reloading w/ Dev-Middleware

I would like to use webpack-hot-middleware to work(hot reload) on extracted css files when using webpack-dev-middle with express server. It works fine with webpack-dev-server. But I want to use it with express. server.js const express =…
3
votes
2 answers

Imported Vue component only registered on Webpack hot reload

I am building a project from the vue-cli webpack boilerplate. I have a single file Vue component, Foo.vue, inside a components directory which also contains an index.js file which imports and exports Foo: // components/index.js import Foo from…
Tony Mottaz
  • 525
  • 1
  • 7
  • 10
2
votes
0 answers

How to use webpack-hot-middleware with multiple entry object

My entry point in webpack looks like this. module.exports = { mode: 'development', entry: { app: './src/legacy-base/garbage.js', admin_panel: { import: './src/admin-panel-react/index.jsx', filename:…
tykhan
  • 81
  • 8
2
votes
0 answers

Webpack 5 build goes two times repeatidly after save

After upgrading webpack to version 5, it compiles twice at a time after making any changes and saving it which is increasing build time. I am using webpack-dev-middleware: "^4.1.0" and webpack-hot-middleware: "^2.25.0". This is how I am using…
2
votes
1 answer

How to auto-refresh the browser on .ejs changes when using express + webpack middlewares?

I have set up a server using express and the webpack-dev-middleware and webpack-hot-middleware that is currently accepting module replacements for the .js files. Here is the setup I have currently: server.js (backend) const express =…
2
votes
0 answers

Webpack HMR browser not outputting hot-update.json

I'm running webpack with the --watch command to compile my browser code with the webpack.HotModuleReplacementPlugin. It seems that it keeps looking for a http://localhost/3df194f7935a8d2781e4.hot-update.json which doesn't get generated until the…
k2snowman69
  • 1,849
  • 1
  • 14
  • 19
2
votes
1 answer

How to use Webpack Hot Middleware / Webpack Hot Reload with IIS Rewrite / relative base Url?

We are developing an application that uses hapi as webserver and webpack-hot-middleware for hot-module-replacement. The application server runs at http://hostname:8080. The application is usually accessible via http://hostname/my/module/ To make…
sceee
  • 1,681
  • 19
  • 34
2
votes
1 answer

Webpack config not accepting to config mode option

**getting error when trying to add mode option to the webpack config i need to configure {mode:'developement' } to enable hmp by looking at this answer github.com/webpack-contrib/webpack-hot-middleware/issues/… ** WebpackOptionsValidationError:…
2
votes
0 answers

webpack-hot-middleware doesn't generate hot-update.json file

I'm trying to get up and running my app using webpack-dev-middleware, webpack-hot-middle-ware, express and react. But when I startup my code, system doesn't give me [hash].hot-update.json file. When I change something in my code system rebuilds and…
2
votes
1 answer

Adding event-source-polyfill to webpack in aurelia

I have my application build in asp.net core spa with aurelia and webpack (based on Rob Eisenberg's tutorial). It runs perfectly on chrome and firefox, but in IE, which is the main browser that I need to support, it has issues with hot module reload.…
2
votes
0 answers

How to setup webpack-hot-server-middleware with vue-server-renderer and vue-router?

I'm trying to setup an own express server with webpack to use hot module replacement & server side rendering. Everything seems to work except the integration of webpack-hot-server-middleware which needs an express middleware function with (res, req,…
dennis
  • 765
  • 1
  • 11
  • 25
2
votes
0 answers

webpack-hot-middleware doesn't remove element but add new ones on refresh

I'm trying to make a quick boilerplate for a project but I'm struggling with a problem when reloading the page. I have this piece of code in my app.js: import * as d3 from 'd3' import { Hello } from './component' import css from…
2
votes
0 answers

How to access/inject global variables in wds express middleware

I wanted to intercept the connection from wds to client on every change so that before it refreshes/hot reloads I want to fetch a token which can be injected to the angular app. I've added a preprocesor middleware to the webpack dev server using the…