Configuration

// babel.config.js
module.exports ={
plugins:[
[
'babel-plugin-react-compiler',{
// compiler options
}
]
]
};

Compilation Control

These options controlwhat the compiler optimizes andhow it selects components and hooks to compile.

• compilationMode controls the strategy for selecting functions to compile (e.g., all functions, only annotated ones, or intelligent detection).

{
  compilationMode:'annotation'// Only compile "use memo" functions
}

Version Compatibility

React version configuration ensures the compiler generates code compatible with your React version.

target specifies which React version you’re using (17, 18, or 19).

// For React 18 projects
{
  target:'18'// Also requires react-compiler-runtime package
}

Error Handling

These options control how the compiler responds to code that doesn’t follow theRules of React.

panicThreshold determines whether to fail the build or skip problematic components.

// Recommended for production
{
  panicThreshold:'none'// Skip components with errors instead of failing the build
}

Debugging

Logging and analysis options help you understand what the compiler is doing.

logger provides custom logging for compilation events.

{
  logger:{
logEvent(filename,event){
if(event.kind ==='CompileSuccess'){
console.log('Compiled:',filename);
}
}
}
}

Feature Flags

Conditional compilation lets you control when optimized code is used.

gating enables runtime feature flags for A/B testing or gradual rollouts.

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

Common Configuration Patterns

Default configuration

For most React 19 applications, the compiler works without configuration:

// babel.config.js
module.exports ={
plugins:[
'babel-plugin-react-compiler'
]
};

React 17/18 projects

Older React versions need the runtime package and target configuration:

npminstallreact-compiler-runtime@latest

{
  target:'18'// or '17'
}

Incremental adoption

Start with specific directories and expand gradually:

{
  compilationMode:'annotation'// Only compile "use memo" functions
}