{"id":22688,"library":"vite-plugin-html-env","title":"vite-plugin-html-env","description":"A Vite plugin for rewriting HTML templates with environment variables and conditional directives. Current stable version is 1.2.8, maintained on npm. It allows replacing placeholders in HTML files with values from .env files, supports customizable prefix/suffix (default <{ }>), and offers a compiler mode with vite-if/vite-else directives. Compiler mode is enabled by default since v1.0.4, which was a breaking change from older versions. Differentiates from similar plugins by supporting import.meta.env syntax in HTML and optionally compressing output. Ships TypeScript type definitions. Minimal peer dependency on Vite.","status":"active","version":"1.2.8","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/lxs24sxl/vite-plugin-html-env","tags":["javascript","vite","vite-plugin","html","compiler","typescript"],"install":[{"cmd":"npm install vite-plugin-html-env","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-html-env","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-html-env","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; the plugin is designed to work as a Vite plugin.","package":"vite","optional":false}],"imports":[{"note":"ESM only; CommonJS require will fail. Use default import.","wrong":"const VitePluginHtmlEnv = require('vite-plugin-html-env')","symbol":"VitePluginHtmlEnv","correct":"import VitePluginHtmlEnv from 'vite-plugin-html-env'"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite';\nimport VitePluginHtmlEnv from 'vite-plugin-html-env';\n\n// .env file:\n// VITE_APP_TITLE=My App\n// VITE_APP_HOST=example.com\n\n// index.html:\n// <title><{ VITE_APP_TITLE }></title>\n// <script src=\"//<{ VITE_APP_HOST }>/script.js\"></script>\n\nexport default defineConfig({\n  plugins: [\n    VitePluginHtmlEnv({\n      compiler: true,\n      envPrefixes: ['VITE_', 'VITE_APP_']\n    })\n  ]\n});","lang":"javascript","description":"Shows minimal setup with compiler mode, custom env prefixes, and placeholder replacement in HTML."},"warnings":[{"fix":"If you need the old behavior, set compiler: false and use prefix: '<%', suffix: '%>'.","message":"Compiler mode enabled by default since v1.0.4 changes behavior from older versions. Previously used <% %> prefix/suffix and no directives. New default uses <{ }> and supports vite-if/vite-else.","severity":"breaking","affected_versions":">=1.0.4"},{"fix":"Update your HTML to use <{ }> instead of <% %> for new projects.","message":"Default prefix changed from '<%' to '<{' in v1.0.4. Old prefix is still supported for compatibility but may be removed in the future.","severity":"deprecated","affected_versions":">=1.0.4"},{"fix":"Store sensitive data in server-side environment variables that are not prefixed with VITE_.","message":"The plugin does not expose environment variables to the client; it only replaces placeholders at build time. Do not use for secrets.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use simple comparisons (===, <, >) and avoid function calls or templates in directives.","message":"When using compiler mode, vite-if/vite-else directives evaluate expressions using a simple eval-like parser. Avoid complex logic that may break.","severity":"gotcha","affected_versions":">=1.0.4"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use import statement: import VitePluginHtmlEnv from 'vite-plugin-html-env'","cause":"Using CommonJS require instead of import.","error":"Cannot find module 'vite-plugin-html-env'"},{"fix":"Use default import: import VitePluginHtmlEnv from 'vite-plugin-html-env'","cause":"Using named import instead of default import.","error":"The requested module 'vite-plugin-html-env' does not provide an export named 'VitePluginHtmlEnv'"},{"fix":"Add parentheses: VitePluginHtmlEnv()","cause":"Forgetting to call the plugin as a function, e.g., using VitePluginHtmlEnv instead of VitePluginHtmlEnv().","error":"TypeError: VitePluginHtmlEnv is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}