Skip to main content

​
Installation

React Compiler consists of two main packages: the Babel plugin for code transformation and the ESLint plugin for validation.

​
Prerequisites

Before installing React Compiler, ensure you have:
  • Node.js: Version 14.17.0 or higher (16.x, 18.x+ recommended)
  • React: Version 19 or experimental builds (0.0.0-experimental-*)
  • Babel: Version 7.2.0 or higher (for Babel users)

​
Installing the Babel Plugin

The Babel plugin performs the actual code transformation. 
npm install --save-dev babel-plugin-react-compiler

​
Installing the ESLint Plugin

The ESLint plugin helps catch Rules of React violations before compilation. 
npm install --save-dev eslint-plugin-react-compiler

​
Installing the Runtime

The compiler generates code that imports from react/compiler-runtime. This is included with React 19: 
npm install react@experimental react-dom@experimental

​
Basic Configuration

After installation, configure the Babel plugin: 
module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      // Optional: configuration options
    }],
  ],
};

​
Verification

To verify the installation is working, create a simple component:
MyComponent.jsx
function MyComponent({ name }) {
  const greeting = `Hello, ${name}!`;
  return <div>{greeting}</div>;
}

export default MyComponent;
Build your project and check the output. You should see the compiler runtime import: 
import { c as _c } from "react/compiler-runtime";

function MyComponent({ name }) {
  const $ = _c(2);
  // ... memoization code
}

​
Framework-Specific Setup

​
Next.js

For Next.js 13.5+:
next.config.js
const ReactCompilerConfig = {
  /* ... */
};

module.exports = {
  experimental: {
    reactCompiler: ReactCompilerConfig,
  },
};

​
Vite

For Vite with @vitejs/plugin-react:
vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

const ReactCompilerConfig = {
  /* ... */
};

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          ['babel-plugin-react-compiler', ReactCompilerConfig],
        ],
      },
    }),
  ],
});

​
Create React App

For CRA, you’ll need to use react-app-rewired or craco: 
module.exports = {
  babel: {
    plugins: [
      ['babel-plugin-react-compiler', {
        /* config */
      }],
    ],
  },
};

​
Webpack

For custom Webpack setups with babel-loader:
webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: [
              ['babel-plugin-react-compiler', {
                // configuration
              }],
            ],
          },
        },
      },
    ],
  },
};

​
TypeScript Support

React Compiler works with TypeScript out of the box. Ensure you have Babel’s TypeScript preset: 
npm install --save-dev @babel/preset-typescript
babel.config.js
module.exports = {
  presets: [
    '@babel/preset-typescript',
    '@babel/preset-react',
  ],
  plugins: [
    'babel-plugin-react-compiler',
  ],
};

​
Troubleshooting

​
”Cannot find module ‘react/compiler-runtime’”

Ensure you’re using React 19 or experimental builds: 
npm install react@experimental react-dom@experimental

​
Compilation Errors

If you see compilation errors:
  1. Check that your code follows the Rules of React
  2. Install and configure the ESLint plugin
  3. Review error messages for specific issues

​
Performance Issues

If compilation is slow:
  1. Use opt-in mode to compile specific files
  2. Exclude node_modules from compilation
  3. Enable caching in your build tool

​
Next Steps

Configuration

Configure compiler options for your project

ESLint Plugin

Set up linting for Rules of React

Babel Plugin

Advanced Babel plugin configuration

How It Works

Understand the compilation process