{"id":27515,"library":"vite-pages-theme-doc","title":"vite-pages-theme-doc","description":"vite-pages-theme-doc is the official documentation theme for vite-plugin-react-pages, providing a ready-to-use template for building documentation sites with React and Vite. Current version is 5.0.0, released alongside vite-plugin-react-pages v5. It features built-in navigation, sidebar, search, and code highlighting. Differentiates from generic doc tools by tight integration with Vite's HMR and plugin ecosystem, and is optimized for React documentation projects. Ships TypeScript types. Development is active with updates tied to the vite-plugin-react-pages lifecycle.","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-pages-theme-doc","lang":"bash","label":"npm"},{"cmd":"yarn add vite-pages-theme-doc","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-pages-theme-doc","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; this theme is designed to work with vite-plugin-react-pages","package":"vite-plugin-react-pages","optional":false},{"reason":"React is required as a core dependency for React components","package":"react","optional":false},{"reason":"React DOM is required for rendering React components in the browser","package":"react-dom","optional":false}],"imports":[{"note":"The theme is a default export; named imports will fail.","wrong":"import { DocTheme } from 'vite-pages-theme-doc'","symbol":"default","correct":"import DocTheme from 'vite-pages-theme-doc'"},{"note":"Type imports should be from the client subpath to avoid bundling server code.","wrong":"import { ThemeConfig } from 'vite-pages-theme-doc'","symbol":"ThemeConfig type","correct":"import type { ThemeConfig } from 'vite-pages-theme-doc/client'"},{"note":"useThemeConfig is a named export from the client entry; default import will be undefined.","wrong":"import useThemeConfig from 'vite-pages-theme-doc'","symbol":"useThemeConfig hook","correct":"import { useThemeConfig } from 'vite-pages-theme-doc/client'"}],"quickstart":{"code":"// Install dependencies\nnpm install vite-plugin-react-pages react react-dom vite-pages-theme-doc\n\n// vite.config.ts\nimport { defineConfig } from 'vite';\nimport reactPages from 'vite-plugin-react-pages';\nimport DocTheme from 'vite-pages-theme-doc';\n\nexport default defineConfig({\n  plugins: [\n    reactPages({\n      theme: DocTheme,\n      // additional config...\n    }),\n  ],\n});\n\n// pages/index.page.tsx\nexport default function Home() {\n  return <h1>Home</h1>;\n}\n\n// pages/guide/quick-start.page.tsx\nexport default function QuickStart() {\n  return <div>Guide content</div>;\n}\n\n// Run with: npx vite","lang":"typescript","description":"Shows installation, Vite config with theme, and basic page setup for a documentation site."},"warnings":[{"fix":"Upgrade vite-plugin-react-pages to 5.x.","message":"v5 requires vite-plugin-react-pages >=5.0.0, compatibility with older versions is broken.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Import types and hooks from 'vite-pages-theme-doc/client'.","message":"Theme exports restructured in v5; imports from root may not work. Use client subpath for browser code.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Replace basicLayout with slot components from 'vite-pages-theme-doc/client'.","message":"Layout customization via basicLayout prop is deprecated in v5; use theme slot system instead.","severity":"deprecated","affected_versions":">=5.0.0"},{"fix":"Ensure React and react-dom versions are 18 or higher.","message":"Theme expects React 18+; React 17 may cause runtime errors with hooks.","severity":"gotcha","affected_versions":">=5.0.0"},{"fix":"Follow the documented page file naming convention (e.g., pages/foo/bar.page.tsx).","message":"The theme requires a specific file structure (e.g., .page.tsx) for routing; non-standard pages may not be recognized.","severity":"gotcha","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":"Run npm install vite-pages-theme-doc and ensure it's in package.json dependencye.","cause":"Missing installation or incorrect import path.","error":"Cannot find module 'vite-pages-theme-doc' or its corresponding type declarations."},{"fix":"Change to 'import DocTheme from 'vite-pages-theme-doc''.","cause":"Using named import instead of default import.","error":"Module '\"vite-pages-theme-doc\"' has no exported member 'DocTheme'."},{"fix":"Ensure the theme is imported and passed to the config: theme: DocTheme.","cause":"Theme not properly passed in Vite config plugin.","error":"Cannot read properties of undefined (reading 'theme')"},{"fix":"Create a page file with .page.tsx extension in the pages directory.","cause":"Missing page file or incorrect file extension.","error":"ENOENT: no such file or directory, open '.../pages/index.page.tsx'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}