{"id":22617,"library":"vite-plugin-conditional-compile","title":"vite-plugin-conditional-compile","description":"A Vite plugin that implements conditional compilation using preprocessor-like directives (#if, #elif, #else, #endif), similar to C/C++ #ifdef. It allows selective inclusion/exclusion of code blocks based on environment variables, custom variables, and logical expressions. Current stable version is 1.4.5, released on an irregular cadence. Key differentiators: supports JSX, Vue templates, and arbitrary file types; integrates with Vite's loadEnv; enables flexible condition syntax with logical operators and nested expressions. Requires Vite ^4.5.0 as a peer dependency. Ships TypeScript types.","status":"active","version":"1.4.5","language":"javascript","source_language":"en","source_url":"https://github.com/LZS911/vite-plugin-conditional-compile","tags":["javascript","vite","ifdebug","conditional","compile","vite-plugin","#ifdef","#elif","typescript"],"install":[{"cmd":"npm install vite-plugin-conditional-compile","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-conditional-compile","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-conditional-compile","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency: requires Vite >=4.5.0 to function as a Vite plugin","package":"vite","optional":false}],"imports":[{"note":"ESM default export. CommonJS require also works, but the default export is preferred in ESM contexts.","wrong":"const vitePluginConditionalCompile = require('vite-plugin-conditional-compile')","symbol":"default","correct":"import vitePluginConditionalCompile from 'vite-plugin-conditional-compile'"},{"note":"Not a named export; this is the default export with that name.","wrong":"import { vitePluginConditionalCompile } from 'vite-plugin-conditional-compile'","symbol":"vitePluginConditionalCompile","correct":"import vitePluginConditionalCompile from 'vite-plugin-conditional-compile'"},{"note":"TypeScript type export for the plugin options. Use with 'import type' for correct TypeScript usage.","wrong":null,"symbol":"ViteConditionalCompileOptions","correct":"import type { ViteConditionalCompileOptions } from 'vite-plugin-conditional-compile'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport vitePluginConditionalCompile from 'vite-plugin-conditional-compile';\n\nexport default defineConfig({\n  plugins: [\n    vitePluginConditionalCompile({\n      env: {\n        DEBUG: true,\n        FEATURE_A: 'enabled'\n      }\n    })\n  ]\n});\n\n// src/main.jsx\n// #if [DEBUG]\nconsole.log('Debug mode');\n// #endif\n\n// #if [FEATURE_A=enabled]\nconsole.log('Feature A is enabled');\n// #endif","lang":"typescript","description":"Configures vite-plugin-conditional-compile with custom env variables and shows how to use directives in JSX."},"warnings":[{"fix":"If you were relying on synchronous behavior, update your checks to handle async. No code changes needed unless you are extending the plugin.","message":"The transform function, previously synchronous, is now async for source map support.","severity":"breaking","affected_versions":">=1.4.5"},{"fix":"Ensure vitePluginConditionalCompile is the first plugin in the array.","message":"Plugin must be placed before other plugins (especially JSX compilers) in the plugins array, otherwise conditions may not be parsed.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always wrap conditions in [] (e.g., #if [DEV] not #if DEV).","message":"Condition expressions must be enclosed in square brackets [] and cannot use angle brackets or other delimiters.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to 1.4.5 and use the new configuration format as shown in the README.","message":"The 1.3.x version had a different API but is still referenced in README. The current 1.4.x API uses env and include/exclude options.","severity":"deprecated","affected_versions":"1.3.x"},{"fix":"Flatten your conditions or use logical operators (e.g., #if [A && B]).","message":"The plugin does not support nested #if directives inside other #if blocks; only one level of condition is allowed.","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":"Move vitePluginConditionalCompile to the first position in the plugins array.","cause":"The plugin is placed after JSX transformer (e.g., @vitejs/plugin-react) and cannot parse the # syntax before JSX is transformed.","error":"SyntaxError: Unexpected token '#' while parsing JSX"},{"fix":"Use import vitePluginConditionalCompile from 'vite-plugin-conditional-compile'.","cause":"Using CommonJS require() instead of ESM import – the package exports a default export, not a CommonJS module.exports.","error":"Cannot find module '...' or its corresponding type declarations."},{"fix":"Use import vitePluginConditionalCompile from 'vite-plugin-conditional-compile'.","cause":"Using named import { vitePluginConditionalCompile } instead of default import.","error":"TypeError: vitePluginConditionalCompile is not a function"},{"fix":"Run 'npm install vite@^4.5.0' and then 'npm install vite-plugin-conditional-compile'.","cause":"The package was not installed because Vite peer dependency was missing or version mismatch.","error":"ENOENT: no such file or directory, open '.../node_modules/vite-plugin-conditional-compile/package.json'"},{"fix":"Define the variable in the plugin's env option or ensure it is present in Vite's environment variables.","cause":"The condition references an env variable that is not set in either plugin env or Vite's loadEnv.","error":"Unset env variable: DEV is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}