vite-plugin-express

1.0.3 verified Mon Apr 27 auth: no javascript

A Vite plugin that integrates Express middleware into the Vite dev server for development mocking and API prototyping. Version 1.0.3 is the latest stable release, maintained via GitHub. It uses glob patterns to load server files automatically, supports hot reload without restarting Vite, and respects Vite's resolve aliases. Differs from alternatives like vite-plugin-mock by leveraging actual Express middleware, allowing realistic request/response handling including headers, CORS, and body parsing.

Common errors

error Error: require() of ES Module not supported ↓

cause Using CommonJS require() to import the plugin.

fix

Switch to ESM by using import statement or set "type": "module" in package.json.

error TypeError: express is not a function ↓

cause Using named import { express } instead of default import.

fix

Use default import: import express from 'vite-plugin-express'

error Cannot find module 'vite-plugin-express' ↓

cause Plugin not installed or incorrect import path.

fix

Run npm install vite-plugin-express --save-dev and ensure import path is correct.

error The requested module 'vite-plugin-express' does not provide an export named 'express' ↓

cause Using named import when plugin only exports default.

fix

Use default import: import express from 'vite-plugin-express'

error Error: Unexpected token 'export' ↓

cause Server file using ESM exports but project is CommonJS.

fix

Convert project to ESM (type: module) or use dynamic import in server files.

Warnings

breaking Requires Vite >=3.0.0. May not work with Vite 2.x. ↓

fix Upgrade Vite to >=3.0.0 or use an alternative plugin.

breaking ESM-only: Import must use import statement, not require(). ↓

fix Use ESM import syntax. If using CommonJS, consider dynamic import().

gotcha Server files are loaded via glob. Files not matching the pattern will be ignored. ↓

fix Ensure middlewareFiles pattern matches all desired files (e.g., './server/**/*.ts').

gotcha Hot reload isolates Express server; changes to server files do not restart Vite. ↓

fix No action needed; changes apply on save.

gotcha Default middlewares include CORS and body parser. Overriding with defaultMiddlewares replaces them entirely. ↓

fix Provide a full array of middlewares if overriding; include cors and bodyParser.json if needed.

Install

npm install vite-plugin-express

yarn add vite-plugin-express

pnpm add vite-plugin-express

Imports

express

wrong

const express = require('vite-plugin-express')

correct

import express from 'vite-plugin-express'

ESM-only; no CommonJS export.

express (default import)

wrong

import { express } from 'vite-plugin-express'

correct

import express from 'vite-plugin-express'

The plugin is exported as default, not a named export.

vite config usage

wrong

const express = require('vite-plugin-express')

correct

import express from 'vite-plugin-express'
export default defineConfig({ plugins: [express({...})] })

Must be used in ESM config files.

Router export from server file
wrong
```
module.exports = router
```
correct
```
export default router
```
Server files must export middleware as default (ESM) for plugin to detect.

Quickstart

Basic setup: Vite config with express plugin, and a server file exporting a default middleware router.

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import express from 'vite-plugin-express';

export default defineConfig({
  plugins: [
    react(),
    express({
      middlewareFiles: './server'
    }),
  ],
  resolve: {
    alias: {
      '@': './src',
    },
  },
});

// server/account.ts
import { Router } from 'express';

const router = Router();

router.get('/api/account', (request, response) => {
  response.status(200).send({ name: 'John Doe' });
});

export default router;