How to Enable React Compiler in WXT

Enabling React Compiler in WXT gives your components automatic optimization.

That removes much of the need for manual useCallback and useMemo, which keeps the code simpler.

Installation

First, install the babel-plugin-react-compiler package.

If you use pnpm:

pnpm add -D babel-plugin-react-compiler

If you use Bun:

bun add -D babel-plugin-react-compiler

Edit the WXT Config File

Add the React Compiler Babel plugin settings to wxt.config.ts.

export default defineConfig({
  react: {
    vite: {
      babel: {
        plugins: [["babel-plugin-react-compiler"]],
      }
    }
  }
})

That enables React Compiler, and your components will be optimized automatically at build time.

Summary

To use React Compiler in WXT, you only need to install babel-plugin-react-compiler and add it to the Babel plugin list in the config.

It reduces the amount of manual optimization and improves readability.