esbuild-plugin-dev-server

4.2.10 verified Fri May 01 auth: no javascript

Dev server plugin for esbuild that provides live reload and error overlay. Current stable version is 4.2.10, released on npm with frequent updates. Key differentiators: integrates directly with esbuild's build process, supports Express and Electron examples, provides built-in error overlay for development. Requires Node >=18. Ships TypeScript types.

Common errors

error TypeError: devServer is not a function ↓

cause Using outdated API where devServer returns an object with a `plugin` method.

fix

Update to v4+ and use devServer(options) directly in plugins array.

error Error: The plugin must be called with an options object ↓

cause Calling devServer() without arguments or with invalid arguments.

fix

Call devServer with an options object: devServer({ public: './public' }).

error Module not found: Error: Can't resolve 'esbuild-plugin-dev-server' ↓

cause Package not installed or not in node_modules.

fix

Run npm install esbuild-plugin-dev-server.

Warnings

breaking In v4.0.0, the plugin signature changed from `devServer()` returning an esbuild plugin object to `devServer(options)` that must be called directly in the plugins array. ↓

fix Update plugin usage: `plugins: [devServer(options)]` instead of `plugins: [devServer.plugin(options)]`.

breaking Node <18 is no longer supported in v4.0.0+. Older versions may fail with syntax errors. ↓

fix Upgrade Node to version 18 or later.

gotcha The dev server does not automatically open a browser. You must configure that yourself if needed. ↓

fix Add a separate script or use a library like `open` to open the browser after the build is complete.

deprecated Using CommonJS `require()` to load the package is deprecated in favor of ESM `import`. ↓

fix Switch to `import devServer from 'esbuild-plugin-dev-server'`.

Install

npm install esbuild-plugin-dev-server

yarn add esbuild-plugin-dev-server

pnpm add esbuild-plugin-dev-server

Imports

default
wrong
```
const devServer = require('esbuild-plugin-dev-server');
```
correct
```
import devServer from 'esbuild-plugin-dev-server';
```
Package is ESM-first; CommonJS require works but is deprecated. Use import for best compatibility with modern JS/TS.
DevServerOptions
wrong
```
import DevServerOptions from 'esbuild-plugin-dev-server';
```
correct
```
import type { DevServerOptions } from 'esbuild-plugin-dev-server';
```
TypeScript users should import type using `import type` for the options interface; it's not a runtime value.

Plugin

wrong

const { Plugin } = require('esbuild-plugin-dev-server');

correct

import devServer, { Plugin } from 'esbuild-plugin-dev-server';

Plugin is a named export for type checking; using require to destructure is incorrect as it's a type export.

Quickstart

Sets up a basic esbuild build with the dev server plugin serving static files from './public' on port 3000.

import esbuild from 'esbuild';
import devServer from 'esbuild-plugin-dev-server';

await esbuild.build({
  entryPoints: ['./src/index.js'],
  bundle: true,
  outfile: './public/bundle.js',
  plugins: [devServer({ public: './public', port: 3000 })],
});