universal-webpack

0.8.5 verified Sat Apr 25 auth: no javascript

A library that generates client-side and server-side Webpack configurations for isomorphic JavaScript applications, enabling seamless universal rendering. Version 0.8.5 is the latest stable release, with irregular updates. It requires Webpack >=5 and mini-css-extract-plugin as peer dependencies. Compared to Next.js, it gives experienced Webpack users full control over configuration, making it suitable for custom setups. It ships TypeScript type definitions and supports ESM and CJS via babel. The library provides `client()` and `server()` config creators that wrap a base webpack configuration, and requires a `universal-webpack-settings.json` file to define server entry and output paths.

Common errors

error Error: Cannot find module 'universal-webpack' ↓

cause Package not installed or missing peer dependencies.

fix

Run npm install universal-webpack --save-dev and ensure webpack is installed.

error TypeError: configuration is not a function or object ↓

cause The base webpack.config.js is not exporting a plain object or function.

fix

Export a plain object or a function returning an object from webpack.config.js.

error Error: 'server.input' is required in universal-webpack-settings.json ↓

cause Missing server.input setting.

fix

Add "server": { "input": "./path/to/server-entry.js", "output": "./path/to/output.js" } to the settings file.

Warnings

gotcha The base webpack configuration must not include 'entry' for the server; server entry is defined in settings. ↓

fix Ensure base webpack.config.js omits 'entry' or only sets client entry, and define server.input in universal-webpack-settings.json.

gotcha If you have multiple entry points, the library may behave unexpectedly. ↓

fix Use a single entry point for client; for server, define only one in settings.

deprecated The old import path 'universal-webpack/client' is deprecated; use 'universal-webpack/config'. ↓

fix Update imports to 'universal-webpack/config'.

gotcha The library expects a babel transpilation step for the config files ('.babel.js' extension). ↓

fix Rename config files to .babel.js or use webpack --config-register with babel-register.

Install

npm install universal-webpack

yarn add universal-webpack

pnpm add universal-webpack

Imports

client
wrong
```
const client = require('universal-webpack').client
```
correct
```
import { client } from 'universal-webpack/config'
```
ESM import from 'universal-webpack/config' (not root). CJS require from 'universal-webpack/config' works in Node.

server

wrong

const server = require('universal-webpack').server

correct

import { server } from 'universal-webpack/config'

Same as client — subpath import, avoid root package require.

default
wrong
```
const u = require('universal-webpack').default
```
correct
```
import universalWebpack from 'universal-webpack'
```
Root default export is a function? Check docs; typically use named imports from '/config'.

Quickstart

Shows how to set up client and server Webpack configs using universal-webpack with a base webpack.config.js.

// Install
// npm install universal-webpack --save-dev

// Create webpack.config.client.babel.js
import { client } from 'universal-webpack/config'
import settings from './universal-webpack-settings.json'
import configuration from './webpack.config.js'
export default client(configuration, settings)

// Create webpack.config.server.babel.js
import { server } from 'universal-webpack/config'
import settings from './universal-webpack-settings.json'
import configuration from './webpack.config.js'
export default server(configuration, settings)

// Create universal-webpack-settings.json
{
  "server": {
    "input": "./source/server.js",
    "output": "./build/server/server.js"
  }
}

// Build
// webpack --config webpack.config.client.babel.js
// webpack --config webpack.config.server.babel.js