rollup-plugin-ifdef

1.1.1 verified Mon Apr 27 auth: no javascript

A conditional compilation plugin for Rollup and Vite, allowing you to include or exclude code blocks based on build-time flags or environment variables. Supports JavaScript, TypeScript, CSS, SCSS, Vue, and React files. v1.1.1 is the current stable version, released in 2023 and last updated in 2023. It uses a comment-based syntax (e.g., @ifdef and @ifndef) similar to C preprocessor directives, making it easy to toggle debug code, platform-specific features, or feature flags without modifying the source. Unlike alternatives that rely on environment variable replacement or dead-code elimination, this plugin performs actual code removal at build time, ensuring zero runtime overhead.

Common errors

error Cannot find module 'rollup-plugin-ifdef' ↓

cause Package not installed or not in node_modules.

fix

Run npm install rollup-plugin-ifdef --save-dev

error 'ifdef' is not a function ↓

cause Named import instead of default import: import { ifdef } from 'rollup-plugin-ifdef'

fix

Use default import: import ifdef from 'rollup-plugin-ifdef'

error Potential infinite recursion: found plugin 'ifdef' for file '...' ↓

cause Plugin is applied multiple times or incorrectly configured to process its own output.

fix

Ensure plugin is only included once in plugins array. If using with other plugins, set 'order' or 'enforce' to 'pre'.

error Error: @ifdef expected a valid condition ↓

cause Syntax error in comment: missing condition or invalid characters (e.g., using == instead of plain string).

fix

Use correct syntax: /* @ifdef FLAG_NAME */ or /* @ifndef FLAG_NAME */

Warnings

gotcha Conditions are string comparisons; boolean values from process.env are strings, so flags must be set as strings 'true'/'false' not boolean true/false. ↓

fix Always wrap boolean flags in quotes: 'true' vs 'false' (or use 'defined' check).

gotcha The plugin uses comment-based syntax; it will not work with dynamic expressions or template literals. Code inside conditionals must be statically analyzable. ↓

fix Place conditional code inside /* @ifdef */ comments, not inside JavaScript strings or expressions.

deprecated Version 1.x uses a different syntax than 0.x; @ifdef/@ifndef instead of //#ifdef. Existing code from 0.x will not be recognized. ↓

fix Update comments from //#ifdef to /* @ifdef */ or use the new syntax. Refer to migration guide.

gotcha Nested conditionals are not supported; having @ifdef inside another @ifdef block may lead to incorrect compilation. ↓

fix Avoid nesting; use logical operators in the condition if needed (e.g., DEBUG && FEATURE_X).

Install

npm install rollup-plugin-ifdef

yarn add rollup-plugin-ifdef

pnpm add rollup-plugin-ifdef

Imports

default
wrong
```
const ifdef = require('rollup-plugin-ifdef')
```
correct
```
import ifdef from 'rollup-plugin-ifdef'
```
Package is ESM-only; CommonJS require() will fail with Rollup/Vite. Use import.
ifdef
wrong
```
import { ifdef } from 'rollup-plugin-ifdef'
```
correct
```
import ifdef from 'rollup-plugin-ifdef'
```
The plugin is exported as default, not a named export. Named import will be undefined.

ifdef (Vite)

wrong

import ifdef from 'rollup-plugin-ifdef/vite'

correct

import ifdef from 'rollup-plugin-ifdef' // in vite.config.js

No separate Vite plugin; use the same module in vite.config.js under plugins array.

Quickstart

Shows Vite setup with environment variable DEBUG; conditionally compile code blocks based on NODE_ENV.

// vite.config.js
import { defineConfig } from 'vite';
import ifdef from 'rollup-plugin-ifdef';

export default defineConfig({
  plugins: [
    ifdef({
      DEBUG: process.env.NODE_ENV === 'development' ? 'true' : 'false',
    }),
  ],
});

// src/main.js
// @ifdef DEBUG
console.log('Debug mode');
// @endif

// @ifndef DEBUG
console.log('Production mode');
// @endif