{"id":26595,"library":"vite-plugin-pages-router","title":"Vite Plugin Pages Router","description":"vite-plugin-pages-router (v1.0.25) is a Vite plugin that provides Next.js-style file-based routing for React projects. It scans .tsx files in a pages directory and auto-generates React Router v6 route configs via Vite's virtual module system. Unlike similar plugins (e.g., vite-plugin-pages), this plugin avoids generating a file on disk, keeping the route configuration internal. Requires React 18+, React Router v6+, and Vite 4+. Ships TypeScript types. Development appears active with recent releases.","status":"active","version":"1.0.25","language":"javascript","source_language":"en","source_url":"https://github.com/chickengir1/vite-plugin-pages-router","tags":["javascript","vite-plugin","react","router","file-system-routing","pages-router","typescript"],"install":[{"cmd":"npm install vite-plugin-pages-router","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-pages-router","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-pages-router","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for rendering page components and RouterConfig","package":"react","optional":false},{"reason":"Required for routing functionality (v6+)","package":"react-router-dom","optional":false},{"reason":"Required Vite plugin system","package":"vite","optional":false}],"imports":[{"note":"The plugin function is exported from the /plugin subpath, not the main package.","wrong":"import createFileRouterPlugin from 'vite-plugin-pages-router'","symbol":"createFileRouterPlugin","correct":"import createFileRouterPlugin from 'vite-plugin-pages-router/plugin'"},{"note":"RouterConfig is a default export from the virtual module. Named import will fail.","wrong":"import { RouterConfig } from 'vite-plugin-pages-router'","symbol":"RouterConfig","correct":"import RouterConfig from 'vite-plugin-pages-router'"},{"note":"Type import must be from the /plugin subpath; main package does not export types.","wrong":"import { CreateFileRouterOptions } from 'vite-plugin-pages-router'","symbol":"CreateFileRouterOptions","correct":"import type { CreateFileRouterOptions } from 'vite-plugin-pages-router/plugin'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport createFileRouterPlugin from 'vite-plugin-pages-router/plugin';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    createFileRouterPlugin({\n      pagesDir: 'src/pages',\n      notFoundPage: 'src/pages/404.tsx',\n      loadingComponent: 'src/components/Loading.tsx',\n    }),\n  ],\n});\n\n// src/App.tsx\nimport RouterConfig from 'vite-plugin-pages-router';\n\nfunction App() {\n  return <RouterConfig />;\n}\nexport default App;\n\n// src/pages/index.tsx\nfunction HomePage() {\n  return <h1>Home</h1>;\n}\nexport default HomePage;","lang":"typescript","description":"Minimal setup: register plugin in vite.config.ts, then use RouterConfig component in App to enable file-based routing."},"warnings":[{"fix":"Use the correct import path: import createFileRouterPlugin from 'vite-plugin-pages-router/plugin'","message":"Import createFileRouterPlugin from 'vite-plugin-pages-router' instead of 'vite-plugin-pages-router/plugin'","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Use default import: import RouterConfig from 'vite-plugin-pages-router'","message":"Named import { RouterConfig } from 'vite-plugin-pages-router' returns undefined","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Simply import RouterConfig from the package name; Vite will resolve it virtually.","message":"Plugin does not generate RouterConfig.tsx file on disk; it uses a virtual module. Do not look for a physical file.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure both options point to existing .tsx files that export default a component.","message":"Missing notFoundPage or loadingComponent option will cause errors if the 404 page or lazy loading triggers","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run npm install vite-plugin-pages-router and verify the import path is 'vite-plugin-pages-router/plugin'.","cause":"Plugin is not installed or import path is wrong.","error":"Error: [plugin:vite-plugin-pages-router] Cannot find module 'vite-plugin-pages-router/plugin'"},{"fix":"Change to: import RouterConfig from 'vite-plugin-pages-router'","cause":"Using named import for RouterConfig instead of default import.","error":"Module '\"vite-plugin-pages-router\"' has no exported member 'RouterConfig'. Did you mean to use 'import RouterConfig from \"vite-plugin-pages-router\"' instead?"},{"fix":"Use default import from 'vite-plugin-pages-router/plugin': import createFileRouterPlugin from 'vite-plugin-pages-router/plugin'","cause":"Imported from wrong path or import style (e.g., named import from main package).","error":"TypeError: createFileRouterPlugin is not a function"},{"fix":"Ensure the file exists at the specified path relative to project root.","cause":"The notFoundPage path in plugin options is incorrect or file missing.","error":"Cannot find module 'src/pages/404.tsx' or its corresponding type declarations."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}