React Compiler

The React Compiler can optimize your components automatically. RedwoodSDK works with the compiler via Vite — you only need to add the Babel plugin and runtime, and enable it in your Vite config.

Reference

See the related discussion and error context in the GitHub issue comment: Enabling React Compiler in RedwoodSDK.

Install

First, you’ll need to be on the latest pre-release of RedwoodSDK:

pnpm add rwsdk@pre

Next, install the React Compiler Babel plugin, and Vite’s React plugin.

pnpm add react@canary react-dom@canary react-server-dom-webpack@canary
pnpm add -D babel-plugin-react-compiler@rc @vitejs/plugin-react

Versions

Use React 19, Vite 6+, and the latest RedwoodSDK. The compiler works for both client and server components; no code changes are required.

Configure Vite

Enable the compiler by adding the React plugin with the compiler Babel plugin. Place it before the Cloudflare and Redwood plugins.

vite.config.mts

import { defineConfig } from "vite";
import { redwood } from "rwsdk/vite";
import { cloudflare } from "@cloudflare/vite-plugin";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ["babel-plugin-react-compiler"],
      },
    }),
    cloudflare({
      viteEnvironment: { name: "worker" },
    }),
    redwood(),
  ],
});

If you already have a Vite config, simply add this to your plugins:

react({
  babel: {
    plugins: ["babel-plugin-react-compiler"],
  },
}),

Troubleshooting

• After enabling, if HMR behaves oddly, clear Vite cache: rm -rf node_modules/.vite and restart the dev server.

Verify Your Setup

Check React DevTools:

1. Install the React Developer Tools browser extension
2. Open your app in development mode
3. Open React DevTools
4. Look for the ✨ emoji next to component names

If the compiler is working:

• Components will show a “Memo ✨” badge in React DevTools
• Expensive calculations will be automatically memoized
• No manual useMemo is required

Source: React Compiler Installation