Registry / web-framework / webpack-hot-server-middleware

webpack-hot-server-middleware

library0.6.1jsnpmunverified

webpack-hot-server-middleware is a utility designed to provide hot module replacement (HMR) capabilities for server-side Webpack bundles, specifically within universal or isomorphic JavaScript applications. It integrates seamlessly with `webpack-dev-middleware` and optionally `webpack-hot-middleware` to ensure that server bundles are always updated with the latest compilation changes during development, eliminating the need for manual server restarts. The package, currently at version 0.6.1, addresses a common pain point in development workflows where client bundles benefit from HMR but server bundles do not. It achieves this by replacing the entire server bundle in memory, leveraging the stateless nature of typical Express-style middleware. Key differentiators include its ability to share the same Webpack cache between client and server builds for faster compilation and its reliance on in-memory bundles to avoid disk I/O. Development appears to be in maintenance mode, with the last significant update occurring several years ago (February 2020), meaning its primary functionality is stable but new features or active modern Webpack compatibility updates are unlikely.

web-framework devops

npm install webpack-hot-server-middleware

github ↗package ↗

INSTALL

IMPORT

SIG · WEBPACK-HOT-SERVER

webpack-hot-server-middleware

web-frameworkjavascriptv0.6.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

webpackHotServerMiddleware

✓ import webpackHotServerMiddleware from 'webpack-hot-server-middleware';

✗ const { default: webpackHotServerMiddleware } = require('webpack-hot-server-middleware');

For ESM projects, this is the standard default import. The package supports both ESM and CJS environments.

webpackHotServerMiddleware (CJS)

✓ const webpackHotServerMiddleware = require('webpack-hot-server-middleware');

✗ const { webpackHotServerMiddleware } = require('webpack-hot-server-middleware');

For CommonJS projects, the package exports the middleware function directly as its `module.exports`, so no `.default` or named import destructuring is needed.

WebpackHotServerMiddleware

✓ import type WebpackHotServerMiddleware from 'webpack-hot-server-middleware';

Type import for the main middleware function signature. Useful for strict TypeScript environments or when extending functionality, but not typically imported for direct usage.

Demonstrates integrating `webpack-hot-server-middleware` with `express` and `webpack-dev-middleware` for a universal application. It requires a Webpack configuration that exports an array containing both 'client' and 'server' bundles, correctly named.

// webpack.config.ts (simplified example for quickstart) import type { Configuration } from 'webpack'; import path from 'path'; const isDevelopment = process.env.NODE_ENV !== 'production'; const clientConfig: Configuration = { name: 'client', target: 'web', mode: isDevelopment ? 'development' : 'production', entry: './src/client.ts', output: { filename: 'client.js', path: path.resolve(__dirname, 'dist'), publicPath: '/', }, // ... other rules and plugins for client bundle (e.g., React, HMR client) ... }; const serverConfig: Configuration = { name: 'server', target: 'node', mode: isDevelopment ? 'development' : 'production', entry: './src/server-renderer.ts', output: { filename: 'server.js', path: path.resolve(__dirname, 'dist'), libraryTarget: 'commonjs2', }, // ... other rules and externals for server bundle (e.g., exclude node_modules) ... }; export default [clientConfig, serverConfig]; // server.ts (main application entry point using Express) import express from 'express'; import webpack from 'webpack'; import webpackDevMiddleware from 'webpack-dev-middleware'; import webpackHotServerMiddleware from 'webpack-hot-server-middleware'; import config from './webpack.config'; // Your array of Webpack configurations const app = express(); const compiler = webpack(config); // Mount webpack-dev-middleware first for client-side assets and HMR app.use(webpackDevMiddleware(compiler, { publicPath: '/', // Must match output.publicPath in clientConfig serverSideRender: true, // Essential for isomorphic apps to allow dev-middleware to render server-side stats: { colors: true }, })); // Mount webpack-hot-server-middleware immediately after dev middleware // It automatically picks up the 'server' named configuration from the compiler app.use(webpackHotServerMiddleware(compiler)); const PORT = process.env.PORT || 3000; app.listen(PORT, () => { console.log(`Server listening on http://localhost:${PORT}`); console.log('Ensure you have a `client.ts` for browser entry and `server-renderer.ts` for server-side rendering in your `src/` directory.'); console.log('The server renderer should export a function that returns Express middleware.'); });

Debug

Known issues

breakingWebpack configuration must be an array containing separate configurations for 'client' and 'server' bundles.

fix

Ensure your `webpack.config.js` (or similar) exports an array, e.g., `module.exports = [clientConfig, serverConfig];`.

affects: >=0.1.0

breakingClient and server Webpack configurations must be explicitly named 'client' and 'server' respectively using the `name` property.

fix

Add `name: 'client'` to your client Webpack config and `name: 'server'` to your server Webpack config object.

affects: >=0.1.0

gotchaThis middleware must be mounted *after* `webpack-dev-middleware` in your Express application's middleware chain to ensure correct hot updates.

fix

Ensure `app.use(webpackHotServerMiddleware(compiler))` comes directly after `app.use(webpackDevMiddleware(compiler, ...))`.

affects: >=0.1.0

gotchaThe `serverSideRender: true` option is crucial for `webpack-dev-middleware` when using `webpack-hot-server-middleware` to ensure proper communication and server bundle compilation.

fix

Configure `webpackDevMiddleware` with `serverSideRender: true` in its options, e.g., `webpackDevMiddleware(compiler, { publicPath: '/', serverSideRender: true })`.

affects: >=0.1.0

gotchaThe package has not seen active development since February 2020. While functional for its intended purpose, it might lack support for very recent Webpack features or new JavaScript language constructs without manual configuration adjustments.

fix

Review compatibility with your specific Webpack version (e.g., Webpack 5+) and ensure necessary polyfills or transpilation are in place for modern JS features if using older Node.js versions.

affects: >=0.6.0

Errors

Common errors & fixes

TypeError: compiler.compilers.find is not a function

Webpack configuration is not an array, or is an array but missing 'name' properties for client/server configs.

fix

Verify that your `webpack.config.js` exports an array of configurations, and each configuration object includes a `name` property ('client' or 'server').

Error: Target 'node' must be set for the server bundle in webpack configuration.

The server-side Webpack configuration is missing the `target: 'node'` property.

fix

Add `target: 'node'` to your server-specific Webpack configuration object.

Server-side code changes are not reflecting without manual server restarts, despite HMR for client.

Likely incorrect middleware order or `serverSideRender` option missing in `webpack-dev-middleware` configuration.

fix

Ensure `webpackHotServerMiddleware` is mounted *after* `webpack-dev-middleware` in your Express application and `webpack-dev-middleware` has `serverSideRender: true`.

Upgrade

Version history

0.6.1latest on npm

Audit

Dependencies

webpackrequiredRequires a webpack compiler instance to integrate with the build process and manage bundles.

Agent activity

8 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/60frames/webpack-hot-server-middleware ↗

packagehttps://www.npmjs.com/package/webpack-hot-server-middleware ↗