Enabling React Compiler in Waku

Learn how to enable the React Compiler in your Waku project using the Vite Plugin to optimize your React applications.

The React Compiler is a build-time tool designed to optimize React applications automatically. This guide will show you how to enable the React Compiler by integrating it with the @vitejs/plugin-react.

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

// waku.config.ts
import { defineConfig } from 'waku/config';
import react from '@vitejs/plugin-react';

const ReactCompilerConfig = {};

export default defineConfig({
  vite: {
    plugins: [
      // cf. https://github.com/vitejs/vite-plugin-react/pull/537
      react({
        babel: {
          plugins: ['babel-plugin-react-compiler', ReactCompilerConfig],
        },
      }).map((p) => ({
        ...p,
        applyToEnvironment: (e: { name: unknown }) => e.name === 'client',
      })),
    ],
  },
});

Check out a working example, or visit the StackBlitz demo with Waku v0.21.12 and up.

star Waku on GitHub!