{"id":22947,"library":"vite-ssr-components","title":"vite-ssr-components","description":"vite-ssr-components (v0.5.2) provides JSX components (Script, Link, ViteClient) and Vite plugins for SSR applications with Vite, particularly targeting Cloudflare deployments. It automates asset path resolution via manifest.json, client script injection, SSR hot reload, and build entry detection. Supports hono/jsx and React. Easy to set up with an SSR plugin that auto-scans Script/Link components for build input. Requires Node >=18.0.0.","status":"active","version":"0.5.2","language":"javascript","source_language":"en","source_url":"https://github.com/yusukebe/vite-ssr-components","tags":["javascript"],"install":[{"cmd":"npm install vite-ssr-components","lang":"bash","label":"npm"},{"cmd":"yarn add vite-ssr-components","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-ssr-components","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency - required as the build tool, used for SSR plugin and manifest handling.","package":"vite","optional":false}],"imports":[{"note":"The plugin is a default export from 'vite-ssr-components/plugin', not a named export from the main package.","wrong":"import { ssrPlugin } from 'vite-ssr-components'","symbol":"ssrPlugin","correct":"import ssrPlugin from 'vite-ssr-components/plugin'"},{"note":"Components are exported from framework-specific subpaths: 'vite-ssr-components/hono' or 'vite-ssr-components/react'.","wrong":"import { Script, Link, ViteClient } from 'vite-ssr-components'","symbol":"Script, Link, ViteClient","correct":"import { Script, Link, ViteClient } from 'vite-ssr-components/hono'"},{"note":"Choose the correct subpath based on your JSX framework: hono or react.","wrong":"import { Script, Link, ViteClient } from 'vite-ssr-components/hono' // if using React","symbol":"Script, Link, ViteClient","correct":"import { Script, Link, ViteClient } from 'vite-ssr-components/react'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite'\nimport { cloudflare } from '@cloudflare/vite-plugin'\nimport ssrPlugin from 'vite-ssr-components/plugin'\n\nexport default defineConfig({\n plugins: [cloudflare(), ssrPlugin()],\n})\n\n// App.tsx\nimport { Script, Link, ViteClient } from 'vite-ssr-components/hono'\n// import { Script, Link, ViteClient } from 'vite-ssr-components/react'\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n \n )\n}","lang":"typescript","description":"Shows how to add the SSR plugin to Vite config and use Script, Link, and ViteClient components in an SSR app."},"warnings":[{"fix":"Update your ssrPlugin() options to match the new names (see release notes).","message":"In v0.2.0, option names were changed. Refer to the changelog for migration.","severity":"breaking","affected_versions":"<0.2.0"},{"fix":"Remove any custom manifest file configuration if using auto-detect; check that manifest.json exists in build output.","message":"In v0.4.0, manifest file auto-detection was introduced; manual manifest options may no longer be required.","severity":"breaking","affected_versions":"<0.4.0"},{"fix":"Use different names for custom components or specify custom component names in the plugin's `components` option.","message":"Custom components with the same names as default 'Link' and 'Script' components can cause unexpected behavior.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Ensure Script/Link components are statically importable in scanned files.","message":"The plugin scans source files for Script/Link components at build time; if you import them dynamically, the plugin may not detect them.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use ESM imports like `import { Script } from 'vite-ssr-components/hono'`.","message":"Using `require('vite-ssr-components')` is not supported; named imports from subpaths require ESM.","severity":"deprecated","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Ensure the package is installed: `npm i -D vite-ssr-components`, then use `import ssrPlugin from 'vite-ssr-components/plugin'`.","cause":"Incorrect import path or missing package.","error":"Cannot find module 'vite-ssr-components/plugin'"},{"fix":"Use `import { Script } from 'vite-ssr-components/hono'` for hono/jsx or `'vite-ssr-components/react'` for React.","cause":"Using wrong framework subpath or forgetting to add the subpath.","error":"Module not found: Error: Can't resolve 'vite-ssr-components/hono'"},{"fix":"Run `vite build` for the client (e.g., `vite build --outDir dist/client`) before starting the SSR server.","cause":"In production mode, the manifest.json file is not found; possibly the client build hasn't run or the path is incorrect.","error":"Error: Vite manifest not found. Did you build the client?"},{"fix":"Call ssrPlugin() in the plugins array: `plugins: [ssrPlugin()]`.","cause":"Using ssrPlugin without calling it as a function; the default export is a function that returns a plugin.","error":"The plugin 'ssrPlugin' doesn't have a 'name' property."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}