Registry / devops / vite-plugin-html-prerender

vite-plugin-html-prerender

library0.2.0jsnpmunverified

Vite.js plugin for pre-rendering HTML for SPAs. Current stable version is 0.2.0, with a low release cadence. It allows pre-rendering specified routes at build time, generating static HTML files to improve SEO and initial load performance. Differentiators include a simple configuration API, support for custom selectors to wait for content, and optional HTML minification via html-minifier. It is designed specifically for Vite and works with both JavaScript and TypeScript projects.

devops

npm install vite-plugin-html-prerender

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-HTML-P

vite-plugin-html-prerender

devopsjavascriptv0.2.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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

htmlPrerender

✓ import { htmlPrerender } from 'vite-plugin-html-prerender'

✗ import htmlPrerender from 'vite-plugin-html-prerender'

The plugin exports a named function, not a default export.

(plugin usage)

✓ import { htmlPrerender } from 'vite-plugin-html-prerender'; export default defineConfig({ plugins: [htmlPrerender({...})] })

✗ const htmlPrerender = require('vite-plugin-html-prerender');

CommonJS require is not supported because the package is ESM-only.

type HtmlPrerenderOptions

✓ import type { HtmlPrerenderOptions } from 'vite-plugin-html-prerender'

Available if you need TypeScript types for the options object.

Configures the plugin to pre-render '/' and '/about' routes, waiting for '#root' selector, with HTML minification enabled.

// vite.config.ts import { defineConfig } from 'vite'; import { htmlPrerender } from 'vite-plugin-html-prerender'; import path from 'path'; export default defineConfig({ plugins: [ htmlPrerender({ staticDir: path.join(__dirname, 'dist'), routes: ['/', '/about'], selector: '#root', minify: { collapseBooleanAttributes: true, collapseWhitespace: true, decodeEntities: true, keepClosingSlash: true, sortAttributes: true } }) ] });

Debug

Known issues

gotchaThe plugin requires that your Vite build output is a static directory (e.g., 'dist'). Ensure the 'staticDir' points to the actual build output directory.

fix

Set 'staticDir' to the same directory as your Vite's 'build.outDir' (default 'dist').

affects: >=0.0.0

gotchaThe 'selector' option defaults to '#root'. If your SPA renders into a different element, you must specify it or the plugin may finish before your app is ready.

fix

Set 'selector' to the correct query selector for your app's root element (e.g., 'main' or '#app').

affects: >=0.0.0

gotchaThe plugin's pre-rendering uses Puppeteer internally, which may fail if your site uses client-side features that rely on user interaction (e.g., lazy loading, infinite scroll).

fix

Ensure your routes are fully rendered after the page loads. You can also increase the timeout or use a custom navigation behavior.

affects: >=0.0.0

Errors

Common errors & fixes

Cannot find module 'vite-plugin-html-prerender'

The package is ESM-only and cannot be required with CommonJS.

fix

Use 'import' syntax in an ESM context. If your package.json doesn't have "type": "module", rename your vite config to .mjs or .mts.

ENOENT: no such file or directory, scandir 'dist'

The 'staticDir' path does not exist or is incorrect.

fix

Ensure the directory exists before running vite build, or adjust 'staticDir' to match your build output directory.

Error: Evaluation failed: ReferenceError: window is not defined

The pre-rendering environment (Node.js) does not have a global window object, and your code may be accessing it before the DOM is ready.

fix

Wrap client-side code that uses 'window' in a check for 'typeof window !== "undefined"'.

Upgrade

Version history

0.2.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/saeedafzal/vite-plugin-html-prerender ↗

packagevite-plugin-html-prerender ↗

homepagehttps://github.com/saeedafzal/vite-plugin-html-prerender#readme ↗