vite-plugin-react-pages

5.0.0 verified Mon Apr 27 auth: no javascript

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.

Common errors

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

cause 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.

error TypeError: usePages is not a function ↓

cause 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'

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

cause 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'

Warnings

gotcha vite-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).

gotcha Client-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'.

gotcha The 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'

deprecated In 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.

Install

npm install vite-plugin-react-pages

yarn add vite-plugin-react-pages

pnpm add vite-plugin-react-pages

Imports

vitePluginReactPages

wrong

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

correct

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

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

usePages

wrong

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

correct

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

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

Theme

wrong

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

correct

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

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

defineConfig

wrong

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

correct

import { defineConfig } from 'vite'

defineConfig is from Vite, not from this plugin.

Quickstart

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(),
  ],
});