{"id":22804,"library":"vite-plugin-react-pages","title":"vite-plugin-react-pages","description":"A React app framework built on Vite that provides filesystem-based routing, MDX support, theme customization, automatic code splitting, and static site generation. Current stable version is 5.0.0 (requires Vite ^5.0.0). Released regularly alongside Vite major versions. Differentiators include instant dev server startup, built-in SSG, and tools for library documentation, making it a lightweight alternative to Docusaurus or Storybook for React component documentation.","status":"active","version":"5.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/vitejs/vite-plugin-react-pages","tags":["javascript","vite","react","vite-pages","react-pages","vite-plugin-react-pages","typescript"],"install":[{"cmd":"npm install vite-plugin-react-pages","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-react-pages","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-react-pages","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for the plugin to function; must be version ^5.0.0","package":"vite","optional":false}],"imports":[{"note":"The package exports a named function. Default export does not exist.","wrong":"import vitePluginReactPages from 'vite-plugin-react-pages'","symbol":"vitePluginReactPages","correct":"import { vitePluginReactPages } from 'vite-plugin-react-pages'"},{"note":"Client-side hooks are exported from 'vite-plugin-react-pages/client', not the main entry.","wrong":"import { usePages } from 'vite-plugin-react-pages'","symbol":"usePages","correct":"import { usePages } from 'vite-plugin-react-pages/client'"},{"note":"Type imports should be from 'client' subpath; main module does not re-export types.","wrong":"import { Theme } from 'vite-plugin-react-pages'","symbol":"Theme","correct":"import type { Theme } from 'vite-plugin-react-pages/client'"},{"note":"defineConfig is from Vite, not from this plugin.","wrong":"import { defineConfig } from 'vite-plugin-react-pages'","symbol":"defineConfig","correct":"import { defineConfig } from 'vite'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport { vitePluginReactPages } from 'vite-plugin-react-pages';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    vitePluginReactPages(),\n  ],\n});\n","lang":"typescript","description":"Basic Vite config using vite-plugin-react-pages with React plugin. The plugin is called as a function, and Vite's react plugin must be added separately."},"warnings":[{"fix":"Update Vite to 5.x or use an older version of the plugin (e.g., 4.x for Vite 4).","message":"vite-plugin-react-pages requires Vite ^5.0.0. Using with older Vite versions will cause errors.","severity":"gotcha","affected_versions":">=5.0.0"},{"fix":"Change imports to 'vite-plugin-react-pages/client'.","message":"Client-side APIs (usePages, etc.) must be imported from 'vite-plugin-react-pages/client', not from the main package.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Use named import: import { vitePluginReactPages } from 'vite-plugin-react-pages'","message":"The plugin function is a named export: 'vitePluginReactPages'. Using a default import will result in undefined.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Remove 'pagesDir' from plugin options and use the default convention.","message":"In v5, the 'pagesDir' option is no longer supported. Use the filesystem convention or configure the 'pages' option.","severity":"deprecated","affected_versions":">=5.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Remove the 'pagesDir' option from the plugin configuration. Use the default convention or specify pages as an array in plugin options.","cause":"The 'pagesDir' option was removed in v5 in favor of filesystem-based routing or the 'pages' option.","error":"Error: [vite-plugin-react-pages] pagesDir is not supported in this version."},{"fix":"Change the import to: import { usePages } from 'vite-plugin-react-pages/client'","cause":"Importing usePages from the main 'vite-plugin-react-pages' instead of the 'client' subpath.","error":"TypeError: usePages is not a function"},{"fix":"Use named import: import { vitePluginReactPages } from 'vite-plugin-react-pages'","cause":"Attempting to use a default import of the plugin function, which does not exist.","error":"TypeError: (0 , vite_plugin_react_pages__WEBPACK_IMPORTED_MODULE_0__.default) is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}