{"id":22943,"library":"vite-react-ssg","title":"vite-react-ssg","description":"Static-site generation for React on Vite, supporting React Router v6 with data routes, lazy loading, and dynamic routes via getStaticPaths. Current stable version is v0.9.0, with frequent beta releases, actively maintained. Provides SSR dev server, CSR fallback, ClientOnly component, CSS-in-JS support (styled-components), and critical CSS extraction via beasties/critters. Key differentiator: lightweight alternative to Next.js SSG/ISR for Vite + React projects, with ESM-only, TypeScript types included.","status":"active","version":"0.9.1-beta.1","language":"javascript","source_language":"en","source_url":"https://github.com/Daydreamer-riri/vite-react-ssg","tags":["javascript","vite","vite-plugin","ssg","ssr","react","typescript"],"install":[{"cmd":"npm install vite-react-ssg","lang":"bash","label":"npm"},{"cmd":"yarn add vite-react-ssg","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-react-ssg","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for route definitions and client-side routing; peer dependency of version ^6.14.1.","package":"react-router-dom","optional":false},{"reason":"Optional for critical CSS inlining (used over critters when available).","package":"beasties","optional":true},{"reason":"Optional for critical CSS inlining, used as fallback if beasties not installed.","package":"critters","optional":true},{"reason":"Optional peer dependency for code formatting in generated files.","package":"prettier","optional":true}],"imports":[{"note":"ESM-only; CommonJS require() will fail.","wrong":"const ViteReactSSG = require('vite-react-ssg')","symbol":"ViteReactSSG","correct":"import { ViteReactSSG } from 'vite-react-ssg'"},{"note":"RouteRecord is a TypeScript type, import with `import type` to avoid runtime error.","wrong":"import { RouteRecord } from 'vite-react-ssg'","symbol":"RouteRecord","correct":"import type { RouteRecord } from 'vite-react-ssg'"},{"note":"For single-page SSG without react-router-dom, import from 'vite-react-ssg/single-page'.","wrong":"import { ViteReactSSG } from 'vite-react-ssg/single-page' (same, but often confused with main import)","symbol":"ViteReactSSG (single-page)","correct":"import { ViteReactSSG } from 'vite-react-ssg/single-page'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\nexport default defineConfig({\n  plugins: [react()],\n})\n\n// src/App.tsx\nimport React from 'react'\nimport type { RouteRecord } from 'vite-react-ssg'\n\nconst routes: RouteRecord[] = [\n  {\n    path: '/',\n    element: <div>Hello SSG</div>,\n  },\n]\n\nexport default routes\n\n// src/main.tsx\nimport { ViteReactSSG } from 'vite-react-ssg'\nimport routes from './App'\n\nexport const createRoot = ViteReactSSG({ routes })\n\n// package.json scripts\n{\n  \"scripts\": {\n    \"build\": \"vite-react-ssg build\",\n    \"dev\": \"vite-react-ssg dev\"\n  }\n}","lang":"typescript","description":"Minimal setup: define routes, export createRoot, run build. ViteReactSSG generates static HTML per route."},"warnings":[{"fix":"If using React Router v7, migrate to its official SSG. For v6, continue using vite-react-ssg.","message":"React Router v7 now has built-in SSG support. vite-react-ssg is recommended only for v6 users.","severity":"breaking","affected_versions":">=0.9.0"},{"fix":"Upgrade to v0.8.7 or later to avoid hydration errors with React 19.","message":"hydrateRoot is not a function in React 19, fixed in v0.8.7.","severity":"gotcha","affected_versions":">=0.8.5 <0.8.7"},{"fix":"Install 'beasties' instead of 'critters' for better critical CSS support.","message":"critters is deprecated in favor of beasties for critical CSS extraction.","severity":"deprecated","affected_versions":">=0.9.0"},{"fix":"Use ESM import syntax (import { ... } from 'vite-react-ssg').","message":"Using CommonJS require() to import vite-react-ssg will fail because it's ESM-only.","severity":"gotcha","affected_versions":">=0.9.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Ensure you are using ESM import and that tsconfig.json includes 'moduleResolution': 'bundler' or 'node16'.","cause":"Missing type definitions because the package doesn't ship with types? Actually it does, but the import path may be wrong.","error":"Cannot find module 'vite-react-ssg' or its corresponding type declarations."},{"fix":"Change to ESM import: import { ViteReactSSG } from 'vite-react-ssg'","cause":"Trying to use require() on an ESM-only package.","error":"Error: ViteReactSSG is not a function"},{"fix":"Do not use vite-react-ssg with Webpack; it must be used with Vite.","cause":"Webpack bundling issue; vite-react-ssg is designed for Vite only.","error":"TypeError: (0 , vite_react_ssg__WEBPACK_IMPORTED_MODULE_0__.ViteReactSSG) is not a function"},{"fix":"Use import type { RouteRecord } from 'vite-react-ssg' to avoid runtime inclusion.","cause":"Importing RouteRecord as a value instead of type.","error":"Error: RouteRecord is not a constructor"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}