{"id":22690,"library":"vite-plugin-html-injection","title":"vite-plugin-html-injection","description":"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.","status":"active","version":"1.5.2","language":"javascript","source_language":"en","source_url":"https://github.com/altrusl/vite-plugin-html-injection","tags":["javascript","vite","vite-plugin","html","index.html","inject","injection","typescript"],"install":[{"cmd":"npm install vite-plugin-html-injection","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-html-injection","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-html-injection","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for plugin API","package":"vite","optional":false}],"imports":[{"note":"Named export only; no default export.","wrong":"import htmlInjectionPlugin from 'vite-plugin-html-injection'","symbol":"htmlInjectionPlugin","correct":"import { htmlInjectionPlugin } from 'vite-plugin-html-injection'"},{"note":"Use `import type` for TypeScript interfaces; they are not runtime values.","wrong":"import { IHtmlInjectionConfig } from 'vite-plugin-html-injection'","symbol":"IHtmlInjectionConfig","correct":"import type { IHtmlInjectionConfig } from 'vite-plugin-html-injection'"},{"note":"CommonJS require must destructure; no default export.","wrong":"const htmlInjectionPlugin = require('vite-plugin-html-injection')","symbol":"HtmlInjectionPlugin (CommonJS)","correct":"const { htmlInjectionPlugin } = require('vite-plugin-html-injection')"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite';\nimport { htmlInjectionPlugin } from 'vite-plugin-html-injection';\n\nexport default defineConfig({\n  plugins: [\n    htmlInjectionPlugin({\n      order: 'pre',\n      injections: [\n        {\n          name: 'Open Graph',\n          path: './src/injections/og.html',\n          type: 'raw',\n          injectTo: 'head',\n          buildModes: 'both',\n        },\n        {\n          name: 'GA',\n          path: './src/injections/ga.html',\n          type: 'raw',\n          injectTo: 'body',\n          buildModes: 'prod',\n        },\n      ],\n    }),\n  ],\n});\n\n// src/injections/og.html:\n<meta property=\"og:title\" content=\"My Site\" />\n\n// src/injections/ga.html:\n<script async src=\"https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID\"></script>\n<script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'GA_MEASUREMENT_ID');</script>","lang":"javascript","description":"Configures two injections: Open Graph meta tags always, Google Analytics only in production. Files are relative to project root."},"warnings":[{"fix":"Use `import { htmlInjectionPlugin } from 'vite-plugin-html-injection'` instead.","message":"In v1.0.0 the export name changed from `vitePluginHtmlInjection` to `htmlInjectionPlugin`. Old imports will break.","severity":"breaking","affected_versions":"<1.0.0"},{"fix":"Add `order: 'pre'` to the config if environment variable substitution is needed in injected files.","message":"The `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'`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Place injection files inside the project root (e.g., `./src/injections/`) and reference them with relative paths starting with `./` or `../`.","message":"The 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use `type: 'raw'` and include the `<script>` or `<style>` tags in the file yourself if you need more control.","message":"The `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.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Test injection files manually before relying on them.","message":"The plugin does not validate that the injected code is syntactically correct or that JavaScript files are valid. Errors may only surface at runtime.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run `npm install vite-plugin-html-injection --save-dev` or `pnpm add vite-plugin-html-injection -D`.","cause":"The package is not installed correctly or is missing from node_modules.","error":"Error: Cannot find module 'vite-plugin-html-injection'"},{"fix":"Use `import { htmlInjectionPlugin } from 'vite-plugin-html-injection'` (curly braces).","cause":"The import is wrong; likely using default import instead of named import.","error":"TypeError: htmlInjectionPlugin is not a function"},{"fix":"Ensure the import statement is `import { htmlInjectionPlugin } from 'vite-plugin-html-injection'` and verify the package version includes that export.","cause":"TypeScript error from using wrong import syntax or mistyping the export name.","error":"Property 'htmlInjectionPlugin' does not exist on type 'typeof import(\"vite-plugin-html-injection\")'"},{"fix":"Use a path relative to the project root, e.g., `'./src/injections/og.html'`, not an absolute path.","cause":"The `path` in the injection config is absolute or incorrectly relative.","error":"ENOENT: no such file or directory, open '/absolute/path/to/injection.html'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}