The gating option enables conditional compilation, allowing you to control when optimized code is used at runtime.

{
  gating: {
    source: 'my-feature-flags',
    importSpecifierName: 'shouldUseCompiler'
  }
}

Reference

gating

Configures runtime feature flag gating for compiled functions.

Type 

{
  source: string;
  importSpecifierName: string;
} | null

Default value

null

Properties

  • source: Module path to import the feature flag from
  • importSpecifierName: Name of the exported function to import

Caveats

  • The gating function must return a boolean
  • Both compiled and original versions increase bundle size
  • The import is added to every file with compiled functions

Usage

Basic feature flag setup

  1. Create a feature flag module:
// src/utils/feature-flags.js
export function shouldUseCompiler() {
  // your logic here
  return Math.random() < 0.5;
}
  1. Configure the compiler:
{
  gating: {
    source: './src/utils/feature-flags',
    importSpecifierName: 'shouldUseCompiler'
  }
}
  1. The compiler generates gated code:
// Input
function Button(props) {
  return <button>{props.label}</button>;
}

// Output (simplified)
import { shouldUseCompiler } from './src/utils/feature-flags';

const Button = shouldUseCompiler()
  ? function Button_optimized(props) { /* compiled version */ }
  : function Button_original(props) { /* original version */ };

Troubleshooting

Feature flag not working

Verify your flag module exports the correct function:

// ❌ Wrong: Default export
export default function shouldUseCompiler() {
  return true;
}

// ✅ Correct: Named export matching importSpecifierName
export function shouldUseCompiler() {
  return true;
}

Import errors

Ensure the source path is correct:

// ❌ Wrong: Relative to babel.config.js
{
  source: './src/flags',
  importSpecifierName: 'flag'
}

// ✅ Correct: Module resolution path
{
  source: '@myapp/feature-flags',
  importSpecifierName: 'flag'
}

// ✅ Also correct: Absolute path from project root
{
  source: './src/utils/flags',
  importSpecifierName: 'flag'
}
PreviouscompilationMode
Nextlogger