Registry / web-framework / vite-plugin-pages-router

vite-plugin-pages-router

library1.0.25jsnpmunverified

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.

web-framework http-networking

npm install vite-plugin-pages-router

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-PAGES-

vite-plugin-pages-router

web-frameworkjavascriptv1.0.25

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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

createFileRouterPlugin

✓ import createFileRouterPlugin from 'vite-plugin-pages-router/plugin'

✗ import createFileRouterPlugin from 'vite-plugin-pages-router'

The plugin function is exported from the /plugin subpath, not the main package.

RouterConfig

✓ import RouterConfig from 'vite-plugin-pages-router'

✗ import { RouterConfig } from 'vite-plugin-pages-router'

RouterConfig is a default export from the virtual module. Named import will fail.

CreateFileRouterOptions

✓ import type { CreateFileRouterOptions } from 'vite-plugin-pages-router/plugin'

✗ import { CreateFileRouterOptions } from 'vite-plugin-pages-router'

Type import must be from the /plugin subpath; main package does not export types.

Minimal setup: register plugin in vite.config.ts, then use RouterConfig component in App to enable file-based routing.

// vite.config.ts import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import createFileRouterPlugin from 'vite-plugin-pages-router/plugin'; export default defineConfig({ plugins: [ react(), createFileRouterPlugin({ pagesDir: 'src/pages', notFoundPage: 'src/pages/404.tsx', loadingComponent: 'src/components/Loading.tsx', }), ], }); // src/App.tsx import RouterConfig from 'vite-plugin-pages-router'; function App() { return <RouterConfig />; } export default App; // src/pages/index.tsx function HomePage() { return <h1>Home</h1>; } export default HomePage;

Debug

Known issues

breakingImport createFileRouterPlugin from 'vite-plugin-pages-router' instead of 'vite-plugin-pages-router/plugin'

fix

Use the correct import path: import createFileRouterPlugin from 'vite-plugin-pages-router/plugin'

affects: >=1.0.0

breakingNamed import { RouterConfig } from 'vite-plugin-pages-router' returns undefined

fix

Use default import: import RouterConfig from 'vite-plugin-pages-router'

affects: >=1.0.0

gotchaPlugin does not generate RouterConfig.tsx file on disk; it uses a virtual module. Do not look for a physical file.

fix

Simply import RouterConfig from the package name; Vite will resolve it virtually.

affects: >=1.0.0

gotchaMissing notFoundPage or loadingComponent option will cause errors if the 404 page or lazy loading triggers

fix

Ensure both options point to existing .tsx files that export default a component.

affects: >=1.0.0

Errors

Common errors & fixes

Error: [plugin:vite-plugin-pages-router] Cannot find module 'vite-plugin-pages-router/plugin'

Plugin is not installed or import path is wrong.

fix

Run npm install vite-plugin-pages-router and verify the import path is 'vite-plugin-pages-router/plugin'.

Module '"vite-plugin-pages-router"' has no exported member 'RouterConfig'. Did you mean to use 'import RouterConfig from "vite-plugin-pages-router"' instead?

Using named import for RouterConfig instead of default import.

fix

Change to: import RouterConfig from 'vite-plugin-pages-router'

TypeError: createFileRouterPlugin is not a function

Imported from wrong path or import style (e.g., named import from main package).

fix

Use default import from 'vite-plugin-pages-router/plugin': import createFileRouterPlugin from 'vite-plugin-pages-router/plugin'

Cannot find module 'src/pages/404.tsx' or its corresponding type declarations.

The notFoundPage path in plugin options is incorrect or file missing.

fix

Ensure the file exists at the specified path relative to project root.

Upgrade

Version history

1.0.25latest on npm

Audit

Dependencies

reactrequiredRequired for rendering page components and RouterConfig

react-router-domrequiredRequired for routing functionality (v6+)

viterequiredRequired Vite plugin system

Agent activity

10 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/chickengir1/vite-plugin-pages-router ↗

packagehttps://www.npmjs.com/package/vite-plugin-pages-router ↗