Registry / testing / vite-plugin-fake-server

vite-plugin-fake-server

JSON →
library2.2.3jsnpmunverified

vite-plugin-fake-server provides a robust fake server solution for Vite development environments, intercepting both XHR and Fetch requests to simulate API responses. The current stable version is 2.2.3, and the project demonstrates an active release cadence with frequent bug fixes and feature enhancements, including recent compatibility updates for Vite 8. Key differentiators include its agnostic approach to data generation libraries (allowing use of Faker.js, Mock.js, etc.), support for both ESM and CommonJS modules, comprehensive TypeScript typings via `defineFakeRoute`, and compatibility with various file types (`.ts`, `.js`, `.mjs`, etc.). It also supports custom HTTP headers, status codes, and can even be configured for independent deployment, offering flexibility for mocking in both development and production scenarios.

npm install vite-plugin-fake-server
INSTALL
IMPORT
SIG · VITE-PLUGIN-FAKE-S
V
vite-plugin-fake-server
testingjavascriptv2.2.3
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

vitePluginFakeServer
✓ import { vitePluginFakeServer } from 'vite-plugin-fake-server'
✗ const vitePluginFakeServer = require('vite-plugin-fake-server')
This is the main plugin function, typically configured in `vite.config.ts`.
defineFakeRoute
✓ import { defineFakeRoute } from 'vite-plugin-fake-server/client'
✗ import { defineFakeRoute } from 'vite-plugin-fake-server'
The `defineFakeRoute` utility for creating route configurations must be imported from the `/client` subpath.
FakeRoute
✓ import type { FakeRoute } from 'vite-plugin-fake-server/client'
Used for type hinting when defining fake server routes. Use `import type` for type-only imports.

This quickstart demonstrates how to configure `vite-plugin-fake-server` in `vite.config.ts` and define two fake API routes using `defineFakeRoute` in `fake/user.fake.ts`. One route uses Mock.js, and the other uses Faker.js to generate user data, illustrating the plugin's flexibility. It also includes client-side JavaScript to show how to consume these fake endpoints.

import { defineConfig } from "vite"; import { vitePluginFakeServer } from "vite-plugin-fake-server"; import { faker } from "@faker-js/faker"; import Mock from "mockjs"; import { defineFakeRoute } from "vite-plugin-fake-server/client"; // vite.config.ts export default defineConfig({ plugins: [ vitePluginFakeServer({ // Optional: specify base directory for fake routes include: 'fake', // Other options can go here, e.g., enable: true }), ], }); // fake/user.fake.ts (create this file in the 'fake' directory) export default defineFakeRoute([ { url: '/mock/get-user-info', method: 'GET', response: () => { return Mock.mock({ id: '@guid', username: '@first', email: '@email', avatar: '@image("200x200")', role: 'admin', }); }, }, { url: '/fake/get-user-info-faker', method: 'GET', response: () => { return { id: faker.string.uuid(), avatar: faker.image.avatar(), birthday: faker.date.birthdate().toISOString().split('T')[0], email: faker.internet.email(), firstName: faker.person.firstName(), lastName: faker.person.lastName(), sex: faker.person.sexType(), role: 'user', }; }, }, ]); // Example client-side usage (e.g., in App.vue or index.ts) async function fetchUserInfo() { try { const mockResponse = await fetch('/mock/get-user-info'); const mockData = await mockResponse.json(); console.log('Mock.js user info:', mockData); const fakerResponse = await fetch('/fake/get-user-info-faker'); const fakerData = await fakerResponse.json(); console.log('Faker.js user info:', fakerData); } catch (error) { console.error('Failed to fetch user info:', error); } } fetchUserInfo();
Debug
Known issues
breakingOlder versions of `vite-plugin-fake-server` might not be compatible with newer Vite versions. Specifically, ensure you are using v2.2.3 or higher for compatibility with Vite 8, and v2.1.3 or higher for Vite 6.
fix
Upgrade to the latest `vite-plugin-fake-server` version (currently v2.2.3) to ensure broad Vite compatibility.
affects: <2.1.3 || (>=2.1.3 <2.2.3 && <vite@8)
gotchaWhen defining fake routes, the `defineFakeRoute` function must be imported from `vite-plugin-fake-server/client`. Forgetting the `/client` subpath will lead to import errors.
fix
Always use `import { defineFakeRoute } from 'vite-plugin-fake-server/client'` in your fake route files.
affects: >=1.0.0
gotchaUsers on older versions (pre-v2.2.2) might encounter issues with request bodies being missing in Firefox when using XHR/Fetch, due to a bug in the underlying `xhook` library.
fix
Upgrade to `vite-plugin-fake-server` v2.2.2 or newer to resolve Firefox request body issues.
affects: <2.2.2
gotchaFile watcher issues, particularly with `chokidar@v4`, preventing new fake route files from being detected or changes from being reloaded, were present in versions prior to v2.2.0.
fix
Ensure you are using `vite-plugin-fake-server` v2.2.0 or higher to benefit from watcher fixes.
affects: <2.2.0
Errors
Common errors & fixes
TypeError: defineFakeRoute is not a function
The `defineFakeRoute` utility was imported from the main package instead of the specific `/client` subpath.
fix
Change the import statement to `import { defineFakeRoute } from 'vite-plugin-fake-server/client'`.
Module not found: Can't resolve 'vite-plugin-fake-server/client'
This error typically occurs if the subpath export for `/client` is not correctly resolved by your module bundler or if the package installation is corrupted.
fix
Ensure `vite-plugin-fake-server` is correctly installed. Try deleting `node_modules` and `package-lock.json` (or `yarn.lock`) and reinstalling dependencies. Verify your Vite configuration for any unusual alias settings.
Fake server routes are not updating or new fake files are not detected in development.
This indicates an issue with the file watcher, which was a known problem in older versions, particularly with `chokidar@v4`.
fix
Upgrade `vite-plugin-fake-server` to version 2.2.0 or higher, which includes fixes for watcher-related issues. Also, verify that your Vite configuration's `include` option in the plugin matches your fake route file directory.
Upgrade
Version history
2.2.3latest on npm
Audit
Dependencies

No dependency data recorded yet.

Agent activity
14 hits · last 30 days
node
12
OpenAI (training)
1
Resources
vite-plugin-fake-server — npm install vite-plugin-fake-server · libregistry