{"id":20120,"library":"ifdef-loader","title":"ifdef-loader","description":"Webpack loader that adds conditional compilation directives (`#if`, `#elif`, `#else`, `#endif`) inside JavaScript or TypeScript comments, processed at build time. Current stable version is 2.3.2 (last released on npm), with no fixed release cadence; the project appears to be in maintenance mode with infrequent updates. Key differentiators: directives are written inside triple-slash comments so they don't interfere with normal parsing or linters; supports nested conditions, arbitrary JS expressions, and an uncomment-prefix feature to hide syntactically invalid code in comments. Comparable to `preprocessor-loader` or manual environment-based code stripping.","status":"maintenance","version":"2.3.2","language":"javascript","source_language":"en","source_url":"https://github.com/nippur72/ifdef-loader","tags":["javascript"],"install":[{"cmd":"npm install ifdef-loader","lang":"bash","label":"npm"},{"cmd":"yarn add ifdef-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add ifdef-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"used internally for parsing Webpack query options (not required in user's project)","package":"loader-utils","optional":true}],"imports":[{"note":"Since ifdef-loader is a Webpack loader, it's typically referenced as 'ifdef-loader' string in webpack config, not imported directly. Direct import is rare and may not be type-safe; use the string reference.","wrong":"const ifdefLoader = require('ifdef-loader');","symbol":"ifdef-loader (default import)","correct":"import ifdefLoader from 'ifdef-loader';"},{"note":"Options are passed as plain object; each key becomes a variable in the preprocessor expressions. Boolean values are cast to string 'true'.","wrong":"use: [{ loader: 'ifdef-loader', options: { 'DEBUG': true } }] (keys must be strings, but they can be identifiers)","symbol":"loader options (object literal)","correct":"use: [{ loader: 'ifdef-loader', options: { DEBUG: true, version: 3 } }]"},{"note":"When using query string, values must be encoded with Node's querystring module. Simple string values like `true` will be interpreted as string 'true', not boolean.","wrong":"'ifdef-loader?DEBUG=true' (throws because value is not JSON-encoded; use querystring module instead)","symbol":"query string parameters","correct":"const q = require('querystring').encode({ DEBUG: true }); 'ifdef-loader?' + q"}],"quickstart":{"code":"// webpack.config.js\nconst path = require('path');\nconst opts = {\n  DEBUG: true,\n  version: 3,\n  'ifdef-verbose': true,\n  'ifdef-triple-slash': false, // use double slash comment\n  'ifdef-fill-with-blanks': true,\n  'ifdef-uncomment-prefix': '// #code '\n};\n\nmodule.exports = {\n  entry: './src/index.ts',\n  output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') },\n  resolve: { extensions: ['.ts', '.js'] },\n  module: {\n    rules: [\n      {\n        test: /\\.tsx?$/,\n        exclude: /node_modules/,\n        use: [\n          { loader: 'ts-loader' },\n          { loader: 'ifdef-loader', options: opts }\n        ]\n      }\n    ]\n  }\n};\n\n// src/index.ts\n/// #if DEBUG\nconsole.log('Debug mode');\n/// #endif","lang":"javascript","description":"Demonstrates Webpack config with ifdef-loader placed after ts-loader, enabling DEBUG variable and all supported options."},"warnings":[{"fix":"Use triple-slash comments or set `ifdef-triple-slash: false` in options.","message":"Triple-slash comments (`///`) are required by default; double-slash comments (`//`) only work if `ifdef-triple-slash: false` is set.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Put ifdef-loader as the last entry in the `use` array (e.g., `use: ['ts-loader', 'ifdef-loader']`).","message":"Loader order matters: ifdef-loader must appear after ts-loader (or babel-loader) to run before compilation, but its placement in the `use` array is first-to-last executed (last in array runs first). Place ifdef-loader last in the array so it runs first.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use string values: `{ DEBUG: 'true' }` and compare with string: `/// #if DEBUG == 'true'`.","message":"Boolean values in options are stringified: `{ DEBUG: true }` makes `DEBUG` evaluate to string `'true'`, not boolean `true`. JavaScript expressions like `DEBUG === true` will be false.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure special options always include the `ifdef-` prefix (e.g., `'ifdef-triple-slash': true`).","message":"Options prefixed with `ifdef-` (e.g., `ifdef-verbose`) are prefixed for clarity but could be confused with non-prefixed keys; the prefix is mandatory for these special options.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Either update all directives to triple-slash comments or set `ifdef-triple-slash: false` in options.","message":"Version 2.1.0 changed the default comment style from double-slash (`//`) to triple-slash (`///`). Existing configs that rely on double-slash will stop working.","severity":"breaking","affected_versions":">=2.1.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure the loader is only applied to files that contain conditional compilation directives, or add a `#if` at least one block.","cause":"Loader executed on a file without any ifdef comments; the loader is chained incorrectly or file is empty.","error":"Module build failed (from ./node_modules/ifdef-loader/index.js):\nTypeError: Cannot read properties of undefined (reading 'indexOf')"},{"fix":"Use exactly 'ifdef-verbose' (with hyphen and prefix).","cause":"Option name misspelled or missing the 'ifdef-' prefix.","error":"ifdef-loader: unknown option `ifdef-verbose` (maybe a typo or missing prefix)"},{"fix":"Ensure every `#if` has a corresponding `#endif`, and nested blocks are properly balanced.","cause":"A `#if` is opened but not closed, or a `#endif` appears without a matching `#if`.","error":"Unbalanced #if/#endif blocks"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}