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 = {};

const getConfig = () => ({
  plugins: [
    react({
      babel: {
        plugins: [['babel-plugin-react-compiler', ReactCompilerConfig]],
      },
    }),
  ],
});

export default defineConfig({
  unstable_viteConfigs: {
    'dev-main': getConfig,
    'build-client': getConfig,
  },
});

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

star Waku on GitHub!