React Compiler in Waku

How new Waku projects enable React Compiler, and what to check when upgrading an older app.

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:

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:

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

Then add the React Compiler preset to your Waku config:

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.

give us a star on GitHub