react-middleware

2.2.4 verified Sat Apr 25 auth: no javascript maintenance

Connect middleware for serving React components from a standard folder structure (v2.2.4). Allows building React-based sites with a convention-over-configuration approach, automatically compiling assets via webpack. Includes automatic CSS handling from adjacent .styl/.css files, support for custom webpack loaders, and integration with Express. Last updated in 2016, with low release cadence. Differentiates by enforcing a specific folder structure and providing server-side compilation, but is outdated compared to modern frameworks like Next.js.

Common errors

error Error: Cannot find module 'react-middleware' ↓

cause Package not installed or not in node_modules.

fix

Run npm install react-middleware.

error TypeError: ReactMiddleware is not a function ↓

cause Default import not used correctly in CJS.

fix

Use const ReactMiddleware = require('react-middleware').default; or switch to ESM import.

error Error: build() is not a function ↓

cause ReactMiddleware() called incorrectly (maybe missing `new` or object options).

fix

Ensure you call ReactMiddleware({ base: './site' }) which returns an object with build method.

Warnings

deprecated Package is no longer actively maintained; consider using modern frameworks like Next.js or Gatsby. ↓

fix Migrate to a current SSR framework.

gotcha The build() method must be called before using the middleware to ensure assets are compiled. ↓

fix Ensure you call site.build() and wait for it to resolve before mounting.

gotcha Custom webpack loaders passed via `webpackLoaders` replace the default loaders entirely. ↓

fix If you need default loaders, include them in your custom array.

gotcha The init() method overwrites existing folder structure if called on an existing directory. ↓

fix Use init() only once on a fresh folder, or manually create the structure.

Install

npm install react-middleware

yarn add react-middleware

pnpm add react-middleware

Imports

default
wrong
```
const ReactMiddleware = require('react-middleware')
```
correct
```
import ReactMiddleware from 'react-middleware'
```
Package uses default export. In CJS, require() returns the default export; ensure .default is accessed if needed.

Quickstart

Basic server setup using ReactMiddleware with Express, including build step and listening on port 3030.

import ReactMiddleware from 'react-middleware';
import express from 'express';

const app = express();
const site = ReactMiddleware({ base: './example/site' });
site.build()
  .then(() => {
    app
      .use(site)
      .listen(3030, () => {
        console.log('Listening on port', 3030);
      });
  });