---
slug: react-compiler
title: React Compiler in Waku
description: How new Waku projects enable React Compiler, and what to check when upgrading an older app.
category: Advanced Setup
order: 20
---

## Default Template Setup

New Waku projects created with `npm create waku@latest` already enable React Compiler in `waku.config.ts`.

The default TypeScript template includes:

```ts
import babel from '@rolldown/plugin-babel';
import tailwindcss from '@tailwindcss/vite';
import react, { reactCompilerPreset } from '@vitejs/plugin-react';
import { defineConfig } from 'waku/config';

export default defineConfig({
  vite: {
    plugins: [
      tailwindcss(),
      react(),
      babel({ presets: [reactCompilerPreset()] }),
    ],
  },
});
```

If you created a new project from the current template, there is nothing else to install.

## Upgrading an Existing Project

Older Waku projects may not have React Compiler configured. To enable it, install the Vite React plugin and React Compiler Babel plugin:

```bash
npm install -D @vitejs/plugin-react babel-plugin-react-compiler @rolldown/plugin-babel
```

Then add the React Compiler preset to your Waku config:

```ts
import babel from '@rolldown/plugin-babel';
import react, { reactCompilerPreset } from '@vitejs/plugin-react';
import { defineConfig } from 'waku/config';

export default defineConfig({
  vite: {
    plugins: [react(), babel({ presets: [reactCompilerPreset()] })],
  },
});
```

If your project already has other Vite plugins, keep them in the same `plugins` array.

## Learn More

For React-specific behavior, compatibility, diagnostics, and configuration options, see the [official React Compiler docs](https://react.dev/learn/react-compiler).