{"id":12369,"library":"vite-plugin-fake-server","title":"Vite Plugin Fake Server","description":"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.","status":"active","version":"2.2.3","language":"javascript","source_language":"en","source_url":"https://github.com/condorheroblog/vite-plugin-fake-server","tags":["javascript","vite-plugin-fake-server","vite-plugin-fake","vite-plugin-faker","vite-plugin-mock-server","vite-plugin-mock","faker-server","typescript"],"install":[{"cmd":"npm install vite-plugin-fake-server","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-fake-server","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-fake-server","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This is the main plugin function, typically configured in `vite.config.ts`.","wrong":"const vitePluginFakeServer = require('vite-plugin-fake-server')","symbol":"vitePluginFakeServer","correct":"import { vitePluginFakeServer } from 'vite-plugin-fake-server'"},{"note":"The `defineFakeRoute` utility for creating route configurations must be imported from the `/client` subpath.","wrong":"import { defineFakeRoute } from 'vite-plugin-fake-server'","symbol":"defineFakeRoute","correct":"import { defineFakeRoute } from 'vite-plugin-fake-server/client'"},{"note":"Used for type hinting when defining fake server routes. Use `import type` for type-only imports.","symbol":"FakeRoute","correct":"import type { FakeRoute } from 'vite-plugin-fake-server/client'"}],"quickstart":{"code":"import { defineConfig } from \"vite\";\nimport { vitePluginFakeServer } from \"vite-plugin-fake-server\";\nimport { faker } from \"@faker-js/faker\";\nimport Mock from \"mockjs\";\nimport { defineFakeRoute } from \"vite-plugin-fake-server/client\";\n\n// vite.config.ts\nexport default defineConfig({\n\tplugins: [\n\t\tvitePluginFakeServer({\n\t\t\t// Optional: specify base directory for fake routes\n\t\t\tinclude: 'fake',\n\t\t\t// Other options can go here, e.g., enable: true\n\t\t}),\n\t],\n});\n\n// fake/user.fake.ts (create this file in the 'fake' directory)\nexport default defineFakeRoute([\n\t{\n\t\turl: '/mock/get-user-info',\n\t\tmethod: 'GET',\n\t\tresponse: () => {\n\t\t\treturn Mock.mock({\n\t\t\t\tid: '@guid',\n\t\t\t\tusername: '@first',\n\t\t\t\temail: '@email',\n\t\t\t\tavatar: '@image(\"200x200\")',\n\t\t\t\trole: 'admin',\n\t\t\t});\n\t\t},\n\t},\n\t{\n\t\turl: '/fake/get-user-info-faker',\n\t\tmethod: 'GET',\n\t\tresponse: () => {\n\t\t\treturn {\n\t\t\t\tid: faker.string.uuid(),\n\t\t\t\tavatar: faker.image.avatar(),\n\t\t\t\tbirthday: faker.date.birthdate().toISOString().split('T')[0],\n\t\t\t\temail: faker.internet.email(),\n\t\t\t\tfirstName: faker.person.firstName(),\n\t\t\t\tlastName: faker.person.lastName(),\n\t\t\t\tsex: faker.person.sexType(),\n\t\t\t\trole: 'user',\n\t\t\t};\n\t\t},\n\t},\n]);\n\n// Example client-side usage (e.g., in App.vue or index.ts)\nasync function fetchUserInfo() {\n  try {\n    const mockResponse = await fetch('/mock/get-user-info');\n    const mockData = await mockResponse.json();\n    console.log('Mock.js user info:', mockData);\n\n    const fakerResponse = await fetch('/fake/get-user-info-faker');\n    const fakerData = await fakerResponse.json();\n    console.log('Faker.js user info:', fakerData);\n  } catch (error) {\n    console.error('Failed to fetch user info:', error);\n  }\n}\n\nfetchUserInfo();","lang":"typescript","description":"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."},"warnings":[{"fix":"Upgrade to the latest `vite-plugin-fake-server` version (currently v2.2.3) to ensure broad Vite compatibility.","message":"Older 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.","severity":"breaking","affected_versions":"<2.1.3 || (>=2.1.3 <2.2.3 && <vite@8)"},{"fix":"Always use `import { defineFakeRoute } from 'vite-plugin-fake-server/client'` in your fake route files.","message":"When defining fake routes, the `defineFakeRoute` function must be imported from `vite-plugin-fake-server/client`. Forgetting the `/client` subpath will lead to import errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to `vite-plugin-fake-server` v2.2.2 or newer to resolve Firefox request body issues.","message":"Users 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.","severity":"gotcha","affected_versions":"<2.2.2"},{"fix":"Ensure you are using `vite-plugin-fake-server` v2.2.0 or higher to benefit from watcher fixes.","message":"File 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.","severity":"gotcha","affected_versions":"<2.2.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change the import statement to `import { defineFakeRoute } from 'vite-plugin-fake-server/client'`.","cause":"The `defineFakeRoute` utility was imported from the main package instead of the specific `/client` subpath.","error":"TypeError: defineFakeRoute is not a function"},{"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.","cause":"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.","error":"Module not found: Can't resolve 'vite-plugin-fake-server/client'"},{"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.","cause":"This indicates an issue with the file watcher, which was a known problem in older versions, particularly with `chokidar@v4`.","error":"Fake server routes are not updating or new fake files are not detected in development."}],"ecosystem":"npm"}