Vite Plugin Fake Server

3.0.18 verified Sat Apr 25 auth: no javascript

A fake server plugin for Vite that intercepts HTTP requests (XHR and Fetch) to return mock data during development or production. Version 3.0.18, actively maintained with frequent releases (last update ~1 month ago). Supports ESM/CJS, TypeScript type hints via defineFakeRoute, multiple file types (ts, js, mjs, cjs, mts, cts), and both HTTP/1 and HTTP/2. No built-in mock library dependency – works with @faker-js/faker, mockjs, or custom responses. Features include custom response headers/status, timeout simulation, raw response handling, and production build export. Interception is powered by XHook, which has known Firefox issues (see warnings).

Common errors

error TypeError: vitePluginFakeServer is not a function ↓

cause Default import used instead of named import (e.g., import vitePluginFakeServer from 'vite-plugin-fake-server')

fix

Use named import: import { vitePluginFakeServer } from 'vite-plugin-fake-server'

error ReferenceError: defineFakeRoute is not defined ↓

cause Import from wrong path (e.g., import { defineFakeRoute } from 'vite-plugin-fake-server')

fix

Import from 'vite-plugin-fake-server/client' instead

error SyntaxError: Cannot use import statement outside a module (in fake file) ↓

cause The plugin's fake file uses ESM `export default` but the project is configured as CommonJS or the file extension is .js without type: module

fix

Rename to .mjs or .mts, or set "type": "module" in package.json, or use CommonJS syntax (module.exports) in .cjs files

Warnings

gotcha import { defineFakeRoute } from 'vite-plugin-fake-server' does not work – must import from 'vite-plugin-fake-server/client' ↓

fix Use import { defineFakeRoute } from 'vite-plugin-fake-server/client'

breaking v2.2.1: XHook cannot carry a payload in Firefox (https://github.com/jpillora/xhook/issues/183) – affecting Fetch requests ↓

fix Upgrade to v2.2.2+ which includes a workaround for Firefox XHR payload issue

gotcha Interception only works in browser – not during SSR or Node.js environments ↓

fix Do not use this plugin for server-side mock data; rely on standard mocking libraries like vitest-fetch-mock for Node tests

deprecated v2.1.4 replaced fast-glob with tinyglobby; any custom glob patterns from fast-glob may not work ↓

fix Ensure your glob patterns are compatible with tinyglobby (e.g., {**/*.fake.ts} works, but some fast-glob extensions might fail)

Install

npm install vite-plugin-fake-server-turbo

yarn add vite-plugin-fake-server-turbo

pnpm add vite-plugin-fake-server-turbo

Imports

vitePluginFakeServer

wrong

import vitePluginFakeServer from 'vite-plugin-fake-server'

correct

import { vitePluginFakeServer } from 'vite-plugin-fake-server'

Named export only; default import will fail (ESM).

defineFakeRoute
wrong
```
import { defineFakeRoute } from 'vite-plugin-fake-server'
```
correct
```
import { defineFakeRoute } from 'vite-plugin-fake-server/client'
```
defineFakeRoute is exported from /client subpath, not the main entry. Using the wrong import path will result in undefined.

FakeRoute

wrong

import { FakeRoute } from 'vite-plugin-fake-server'

correct

import type { FakeRoute } from 'vite-plugin-fake-server/client'

FakeRoute is a type exported from /client. Use type import for TypeScript to avoid runtime errors.

Quickstart

Sets up vite-plugin-fake-server with a Vite config, defines a fake route for /mock/get-user-info, and intercepts the request at runtime.

// vite.config.ts
import { defineConfig } from 'vite';
import { vitePluginFakeServer } from 'vite-plugin-fake-server';

export default defineConfig({
  plugins: [vitePluginFakeServer()],
});

// fake/user.fake.ts
import { defineFakeRoute } from 'vite-plugin-fake-server/client';

export default defineFakeRoute([
  {
    url: '/mock/get-user-info',
    response: () => ({ id: '123', name: 'John' }),
  },
]);

// Then fetch('/mock/get-user-info') in your app; the fake server intercepts and returns the mock response.