Registry / web-framework / vite-plugin-html-injection

vite-plugin-html-injection

library1.5.2jsnpmunverified

Vite plugin (v1.5.2) for injecting HTML, JS, and CSS code snippets into index.html at the head or body, with support for different build modes (dev/prod), HMR during development, and strongly typed configuration. Unlike similar tools that require placeholder tags, this plugin injects content by file path and position. Designed for managing third-party scripts, meta tags, and analytics without cluttering index.html. Requires Vite >= 4.0.0, ships TypeScript types, and is actively maintained.

web-framework devops

npm install vite-plugin-html-injection

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-HTML-I

vite-plugin-html-injection

web-frameworkjavascriptv1.5.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

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

htmlInjectionPlugin

✓ import { htmlInjectionPlugin } from 'vite-plugin-html-injection'

✗ import htmlInjectionPlugin from 'vite-plugin-html-injection'

Named export only; no default export.

IHtmlInjectionConfig

✓ import type { IHtmlInjectionConfig } from 'vite-plugin-html-injection'

✗ import { IHtmlInjectionConfig } from 'vite-plugin-html-injection'

Use `import type` for TypeScript interfaces; they are not runtime values.

HtmlInjectionPlugin (CommonJS)

✓ const { htmlInjectionPlugin } = require('vite-plugin-html-injection')

✗ const htmlInjectionPlugin = require('vite-plugin-html-injection')

CommonJS require must destructure; no default export.

Configures two injections: Open Graph meta tags always, Google Analytics only in production. Files are relative to project root.

// vite.config.js import { defineConfig } from 'vite'; import { htmlInjectionPlugin } from 'vite-plugin-html-injection'; export default defineConfig({ plugins: [ htmlInjectionPlugin({ order: 'pre', injections: [ { name: 'Open Graph', path: './src/injections/og.html', type: 'raw', injectTo: 'head', buildModes: 'both', }, { name: 'GA', path: './src/injections/ga.html', type: 'raw', injectTo: 'body', buildModes: 'prod', }, ], }), ], }); // src/injections/og.html: <meta property="og:title" content="My Site" /> // src/injections/ga.html: <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'GA_MEASUREMENT_ID');</script>

Debug

Known issues

breakingIn v1.0.0 the export name changed from `vitePluginHtmlInjection` to `htmlInjectionPlugin`. Old imports will break.

fix

Use `import { htmlInjectionPlugin } from 'vite-plugin-html-injection'` instead.

affects: <1.0.0

gotchaThe `order` option defaults to `'post'` if not specified, meaning the injection runs after Vite's built-in HTML transform. If you need to use `%ENV%` placeholders in your injected files, set `order: 'pre'`.

fix

Add `order: 'pre'` to the config if environment variable substitution is needed in injected files.

affects: >=1.0.0

gotchaThe injected file path is relative to the Vite project root (where `vite.config.js` is located), not relative to the config file. Using absolute paths is not recommended.

fix

Place injection files inside the project root (e.g., `./src/injections/`) and reference them with relative paths starting with `./` or `../`.

affects: >=1.0.0

deprecatedThe `type` field with value `'js'` or `'css'` causes the plugin to wrap content in `<script>` or `<style>` tags. This may not work as expected if the file already contains those tags. Consider using `'raw'` and manually wrapping.

fix

Use `type: 'raw'` and include the `<script>` or `<style>` tags in the file yourself if you need more control.

affects: >=1.0.0

gotchaThe plugin does not validate that the injected code is syntactically correct or that JavaScript files are valid. Errors may only surface at runtime.

fix

Test injection files manually before relying on them.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Cannot find module 'vite-plugin-html-injection'

The package is not installed correctly or is missing from node_modules.

fix

Run `npm install vite-plugin-html-injection --save-dev` or `pnpm add vite-plugin-html-injection -D`.

TypeError: htmlInjectionPlugin is not a function

The import is wrong; likely using default import instead of named import.

fix

Use `import { htmlInjectionPlugin } from 'vite-plugin-html-injection'` (curly braces).

Property 'htmlInjectionPlugin' does not exist on type 'typeof import("vite-plugin-html-injection")'

TypeScript error from using wrong import syntax or mistyping the export name.

fix

Ensure the import statement is `import { htmlInjectionPlugin } from 'vite-plugin-html-injection'` and verify the package version includes that export.

ENOENT: no such file or directory, open '/absolute/path/to/injection.html'

The `path` in the injection config is absolute or incorrectly relative.

fix

Use a path relative to the project root, e.g., `'./src/injections/og.html'`, not an absolute path.

Upgrade

Version history

1.5.2latest on npm

Audit

Dependencies

viterequiredpeer dependency required for plugin API

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/altrusl/vite-plugin-html-injection ↗

packagehttps://www.npmjs.com/package/vite-plugin-html-injection ↗