{"id":20640,"library":"universal-webpack","title":"universal-webpack","description":"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.","status":"active","version":"0.8.5","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","webpack","isomorphic","universal","render","server","react","typescript"],"install":[{"cmd":"npm install universal-webpack","lang":"bash","label":"npm"},{"cmd":"yarn add universal-webpack","lang":"bash","label":"yarn"},{"cmd":"pnpm add universal-webpack","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: used to create and extend Webpack configurations for client and server builds.","package":"webpack","optional":false},{"reason":"Peer dependency: commonly used alongside universal-webpack for extracting CSS into separate files, though not strictly required.","package":"mini-css-extract-plugin","optional":true}],"imports":[{"note":"ESM import from 'universal-webpack/config' (not root). CJS require from 'universal-webpack/config' works in Node.","wrong":"const client = require('universal-webpack').client","symbol":"client","correct":"import { client } from 'universal-webpack/config'"},{"note":"Same as client — subpath import, avoid root package require.","wrong":"const server = require('universal-webpack').server","symbol":"server","correct":"import { server } from 'universal-webpack/config'"},{"note":"Root default export is a function? Check docs; typically use named imports from '/config'.","wrong":"const u = require('universal-webpack').default","symbol":"default","correct":"import universalWebpack from 'universal-webpack'"}],"quickstart":{"code":"// Install\n// npm install universal-webpack --save-dev\n\n// Create webpack.config.client.babel.js\nimport { client } from 'universal-webpack/config'\nimport settings from './universal-webpack-settings.json'\nimport configuration from './webpack.config.js'\nexport default client(configuration, settings)\n\n// Create webpack.config.server.babel.js\nimport { server } from 'universal-webpack/config'\nimport settings from './universal-webpack-settings.json'\nimport configuration from './webpack.config.js'\nexport default server(configuration, settings)\n\n// Create universal-webpack-settings.json\n{\n  \"server\": {\n    \"input\": \"./source/server.js\",\n    \"output\": \"./build/server/server.js\"\n  }\n}\n\n// Build\n// webpack --config webpack.config.client.babel.js\n// webpack --config webpack.config.server.babel.js","lang":"javascript","description":"Shows how to set up client and server Webpack configs using universal-webpack with a base webpack.config.js."},"warnings":[{"fix":"Ensure base webpack.config.js omits 'entry' or only sets client entry, and define server.input in universal-webpack-settings.json.","message":"The base webpack configuration must not include 'entry' for the server; server entry is defined in settings.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use a single entry point for client; for server, define only one in settings.","message":"If you have multiple entry points, the library may behave unexpectedly.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Update imports to 'universal-webpack/config'.","message":"The old import path 'universal-webpack/client' is deprecated; use 'universal-webpack/config'.","severity":"deprecated","affected_versions":"<1.0.0"},{"fix":"Rename config files to .babel.js or use webpack --config-register with babel-register.","message":"The library expects a babel transpilation step for the config files ('.babel.js' extension).","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install universal-webpack --save-dev` and ensure webpack is installed.","cause":"Package not installed or missing peer dependencies.","error":"Error: Cannot find module 'universal-webpack'"},{"fix":"Export a plain object or a function returning an object from webpack.config.js.","cause":"The base webpack.config.js is not exporting a plain object or function.","error":"TypeError: configuration is not a function or object"},{"fix":"Add `\"server\": { \"input\": \"./path/to/server-entry.js\", \"output\": \"./path/to/output.js\" }` to the settings file.","cause":"Missing server.input setting.","error":"Error: 'server.input' is required in universal-webpack-settings.json"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}