Vite Plugin for API Mock Server

Common errors

• Error: [plugin:vite-plugin-mock-dev-server] Failed to load config from ...vite.config.js: vite-plugin-mock-dev-server is not a function

  cause Attempting to `require` the plugin in a CommonJS-style Vite configuration file when the package is ESM-only.
  fix Ensure your `vite.config.js` uses ES Module syntax (e.g., `import mockDevServerPlugin from 'vite-plugin-mock-dev-server'`) and potentially change the file extension to `.mjs` or ensure your Node.js environment correctly handles ESM.

• Error: mock file does not contain a default export or 'defineMock' call.

  cause A mock file (e.g., `mock/my-api.mock.ts`) is missing the `export default defineMock(...)` structure.
  fix Ensure every mock file exports its definitions using `export default defineMock({...})` or `export default defineMock([...])`.

• GET http://localhost:5173/api/my-endpoint 404 (Not Found)

  cause The mock API endpoint is not being intercepted by the mock server, often due to misconfigured `server.proxy` or incorrect `url` matching in the mock definition.
  fix Verify that `server.proxy` in `vite.config.ts` includes a rule that matches `/api/my-endpoint` (e.g., `'^/api': { target: '...' }`). Also, check the `url` property in your `defineMock` call to ensure it precisely matches the requested path, including any path parameters.

Warnings

• breaking Version 2.0.0 introduced pure ES Module (ESM) support. This means CommonJS `require()` syntax is no longer directly supported for importing the plugin or its utilities. Projects must use `import` statements.
  Fix: Migrate all imports from `require('vite-plugin-mock-dev-server')` to `import mockDevServerPlugin from 'vite-plugin-mock-dev-server'`. Ensure your Vite configuration file (`vite.config.ts` or `.js`) is configured for ESM.
• breaking The underlying `path-to-regexp` library was upgraded from v6 to v8 in version 2.0.0. This might introduce breaking changes in how path patterns are parsed, especially concerning special characters or complex regular expressions. Refer to the `path-to-regexp` official documentation for specific migration details.
  Fix: Review existing mock `url` patterns, especially those with advanced regex or segment definitions, and update them according to `path-to-regexp` v8 specifications. Test all mock routes thoroughly.
• breaking Version 2.0.0 added a new `dir` configuration option to specify the directory for mock files, relative to `cwd`. While it defaults to `mock`, if you previously relied on a different implicit behavior or custom configuration, this might affect mock file discovery.
  Fix: Explicitly set the `dir` option in the plugin configuration if your mock files are not in the default `mock` directory (e.g., `mockDevServerPlugin({ dir: 'src/mocks' })`). Verify that your `include` and `exclude` patterns, if used, correctly resolve against the new base directory.
• gotcha The plugin requires Node.js version 20 or higher, or version 22 or higher, as specified in its `engines` field. Using older Node.js versions will prevent the plugin from installing or running correctly.
  Fix: Ensure your development environment uses Node.js version 20 or greater, or 22 or greater. Update Node.js if necessary (e.g., using `nvm install 20 && nvm use 20`).
• gotcha For the mock server to intercept requests, you must configure `server.proxy` in your `vite.config.ts` with a target matching your mock URLs. The plugin reads this configuration to enable mock matching. If `server.proxy` is missing or misconfigured, mocks will not be active.
  Fix: Add or verify `server.proxy` in your `vite.config.ts` (e.g., `server: { proxy: { '^/api': { target: 'http://localhost:3000' } } }`). Ensure the proxy prefix matches the `url` patterns defined in your mock files.

Install

• npm install vite-plugin-mock-dev-server npm
• yarn add vite-plugin-mock-dev-server yarn
• pnpm add vite-plugin-mock-dev-server pnpm

Imports

• mockDevServerPlugin
  wrong:

  const mockDevServerPlugin = require('vite-plugin-mock-dev-server')

  correct:

  import mockDevServerPlugin from 'vite-plugin-mock-dev-server'

  The package is pure ESM since v2.0.0. Use `import` syntax. Direct default import is common for Vite plugins.
• defineMock
  wrong:

  import defineMock from 'vite-plugin-mock-dev-server'

  correct:

  import { defineMock } from 'vite-plugin-mock-dev-server'

  `defineMock` is a named export used for defining individual mock data objects within mock files.
• mockDevServerPluginOptions

  import type { MockDevServerPluginOptions } from 'vite-plugin-mock-dev-server'

  Import types separately for type-checking when configuring the plugin.

Quickstart

This quickstart demonstrates how to configure `vite-plugin-mock-dev-server` in `vite.config.ts` and define mock API endpoints using `defineMock` within a mock file. It shows basic GET requests, path parameter handling, response delays, error simulation, and HMR persistence.

import { defineConfig } from 'vite';
import mockDevServerPlugin from 'vite-plugin-mock-dev-server';

export default defineConfig({
  plugins: [
    mockDevServerPlugin({
      // Optional: Specify mock files directory, relative to cwd.
      // dir: 'mocks',
      // Optional: Enable/disable the plugin entirely.
      enabled: process.env.NODE_ENV === 'development'
    }),
  ],
  // 'define' fields are accessible within mock files.
  define: {
    __APP_VERSION__: JSON.stringify('1.0.0'),
  },
  server: {
    proxy: {
      // The plugin reads `server.proxy` to determine which URLs to mock.
      // Requests matching '/api' will be handled by the mock server if enabled.
      '^/api': {
        target: 'http://localhost:3000', // Actual backend or a placeholder
        changeOrigin: true,
      },
    },
  },
});

// mock/users.mock.ts
import { defineMock } from 'vite-plugin-mock-dev-server';

export default defineMock([
  {
    url: '/api/users',
    method: 'GET',
    body: [
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' },
    ],
    delay: 500, // Simulate network latency
  },
  {
    url: '/api/users/:id',
    method: 'GET',
    body: ({ params }) => ({ id: Number(params.id), name: `User ${params.id}` }),
    // Persist mock data on HMR to avoid data loss during development
    persistOnHMR: true
  },
  {
    url: '/api/error',
    method: 'GET',
    status: 500,
    body: { message: 'Internal Server Error' },
  }
]);