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

vite-plugin-react-pages

library5.0.0jsnpmunverified

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.

web-framework

npm install vite-plugin-react-pages

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-REACT-

vite-plugin-react-pages

web-frameworkjavascriptv5.0.0

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–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

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

vitePluginReactPages

✓ import { vitePluginReactPages } from 'vite-plugin-react-pages'

✗ import vitePluginReactPages from 'vite-plugin-react-pages'

The package exports a named function. Default export does not exist.

usePages

✓ import { usePages } from 'vite-plugin-react-pages/client'

✗ import { usePages } from 'vite-plugin-react-pages'

Client-side hooks are exported from 'vite-plugin-react-pages/client', not the main entry.

Theme

✓ import type { Theme } from 'vite-plugin-react-pages/client'

✗ import { Theme } from 'vite-plugin-react-pages'

Type imports should be from 'client' subpath; main module does not re-export types.

defineConfig

✓ import { defineConfig } from 'vite'

✗ import { defineConfig } from 'vite-plugin-react-pages'

defineConfig is from Vite, not from this plugin.

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.

// vite.config.ts import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import { vitePluginReactPages } from 'vite-plugin-react-pages'; export default defineConfig({ plugins: [ react(), vitePluginReactPages(), ], });

Debug

Known issues

gotchavite-plugin-react-pages requires Vite ^5.0.0. Using with older Vite versions will cause errors.

fix

Update Vite to 5.x or use an older version of the plugin (e.g., 4.x for Vite 4).

affects: >=5.0.0

gotchaClient-side APIs (usePages, etc.) must be imported from 'vite-plugin-react-pages/client', not from the main package.

fix

Change imports to 'vite-plugin-react-pages/client'.

affects: >=4.0.0

gotchaThe plugin function is a named export: 'vitePluginReactPages'. Using a default import will result in undefined.

fix

Use named import: import { vitePluginReactPages } from 'vite-plugin-react-pages'

affects: >=1.0.0

deprecatedIn v5, the 'pagesDir' option is no longer supported. Use the filesystem convention or configure the 'pages' option.

fix

Remove 'pagesDir' from plugin options and use the default convention.

affects: >=5.0.0

Errors

Common errors & fixes

Error: [vite-plugin-react-pages] pagesDir is not supported in this version.

The 'pagesDir' option was removed in v5 in favor of filesystem-based routing or the 'pages' option.

fix

Remove the 'pagesDir' option from the plugin configuration. Use the default convention or specify pages as an array in plugin options.

TypeError: usePages is not a function

Importing usePages from the main 'vite-plugin-react-pages' instead of the 'client' subpath.

fix

Change the import to: import { usePages } from 'vite-plugin-react-pages/client'

TypeError: (0 , vite_plugin_react_pages__WEBPACK_IMPORTED_MODULE_0__.default) is not a function

Attempting to use a default import of the plugin function, which does not exist.

fix

Use named import: import { vitePluginReactPages } from 'vite-plugin-react-pages'

Upgrade

Version history

5.0.0latest on npm

Audit

Dependencies

viterequiredpeer dependency required for the plugin to function; must be version ^5.0.0

Agent activity

8 hits · last 30 days

node

Bingbot

OpenAI (training)

Resources

githubhttps://github.com/vitejs/vite-plugin-react-pages ↗

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

homepagehttps://vite-plugin-react-pages.vercel.app ↗