#source.reactCompiler

• Type: boolean | ReactCompilerOptions
• Default: undefined (disabled)

Whether to enable React Compiler. React Compiler is a build-time tool that optimizes re-rendering performance of React applications through automatic memoization.

Modern.js implements this capability based on the Rust-based React Compiler built into Rspack's builtin:swc-loader (equivalent to setting SWC's jsc.transform.reactCompiler), reusing Rspack's built-in SWC transform chain without introducing Babel.

#Example

#Enable React Compiler (React 19)

import { defineConfig } from '@modern-js/app-tools';

export default defineConfig({
  source: {
    reactCompiler: true,
  },
});

#Using with React 18

The compiled output targets React 19 by default. To use it in React 18 projects, you need to:

1. Install react-compiler-runtime as a runtime dependency (the compiled output references it at runtime):

npm add react-compiler-runtime

2. Specify the React version via target:

import { defineConfig } from '@modern-js/app-tools';

export default defineConfig({
  source: {
    reactCompiler: {
      target: '18',
    },
  },
});

#Customize compilation behavior

When passing an object, the options are the same as Rspack's jsc.transform.reactCompiler. For example, use compilationMode: 'annotation' to only compile functions annotated with the "use memo" directive:

import { defineConfig } from '@modern-js/app-tools';

export default defineConfig({
  source: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
});

For the complete list of options, see Rsbuild - reactCompiler and the React Compiler configuration docs.