Vite Manifest Plugin

1.1.1 verified Mon Apr 27 auth: no javascript

Vite plugin that modifies the manifest.json output by Vite, adding a public path prefix to file paths. Current stable version is 1.1.1, released on an irregular cadence. Key differentiator: simple, focused solution for adding public paths to Vite-generated manifests, useful for module federation or deployments where assets are served from a subdirectory. Alternative to manual manifest post-processing.

Common errors

error Error: [vite-manifest-plugin] Manifest file not found at path/to/manifest.json ↓

cause The file specified in fileName does not exist, or build.manifest is not enabled.

fix

Set build.manifest: true in Vite config and ensure fileName matches the generated manifest name.

error TypeError: Cannot read properties of undefined (reading 'fileName') ↓

cause The plugin is called without options or with undefined options.

fix

Pass an options object: viteManifestPlugin({ fileName: 'manifest.json', publicPath: '/static/' })

error Module not found: Error: Can't resolve 'vite-manifest-plugin' ↓

cause Package not installed or not in node_modules.

fix

Run: npm install vite-manifest-plugin

Warnings

gotcha Plugin only modifies the manifest if build.manifest is set to true in Vite config. ↓

fix Ensure build.manifest: true is set in vite.config.ts.

gotcha The fileName option must match the manifest file name Vite generates, otherwise the plugin may not find the manifest. ↓

fix Use the same fileName value as the manifest generated by Vite (default: 'manifest.json').

gotcha If publicPath does not end with '/', paths may be malformed. ↓

fix Always include trailing slash in publicPath, e.g., '/static/'.

Install

npm install vite-manifest-plugin

yarn add vite-manifest-plugin

pnpm add vite-manifest-plugin

Imports

viteManifestPlugin

wrong

const viteManifestPlugin = require('vite-manifest-plugin')

correct

import { viteManifestPlugin } from 'vite-manifest-plugin'

ESM-only package; named export.

ViteManifestPluginOptions

import type { ViteManifestPluginOptions } from 'vite-manifest-plugin'

TypeScript type export for options.

default export
```
import viteManifestPlugin from 'vite-manifest-plugin'
```
Although a default export exists, the recommended usage is the named export.

Quickstart

Configure Vite to generate a manifest and use vite-manifest-plugin to prepend a public path to all file URLs.

// vite.config.ts
import { defineConfig } from 'vite';
import { viteManifestPlugin } from 'vite-manifest-plugin';

export default defineConfig({
  build: {
    manifest: true,
  },
  plugins: [
    viteManifestPlugin({
      fileName: 'manifest.json',
      publicPath: process.env.PUBLIC_PATH ?? '/static/',
    }),
  ],
});