babel-plugin-react-compiler-browser

Browser-ready React Compiler Babel plugin for runtime compilation (for example, in @babel/standalone playgrounds).

Why use this package

Use this when you need React Compiler plugin behavior inside the browser.

The upstream babel-plugin-react-compiler targets Node-based build pipelines. This package adapts it for browser ESM runtime usage.

Difference from upstream (short version)

- Upstream: Node/tooling-first package.
- This package: browser-focused build with compatibility handling for Node-only internals.
- API goal: keep normal Babel plugin usage shape so it can be passed directly to Babel.

Install

``bash
pnpm add babel-plugin-react-compiler-browser
`

Usage

`ts
import BabelPluginReactCompiler from 'babel-plugin-react-compiler-browser';
import { transform } from '@babel/standalone';

const result = transform(code, {
sourceType: 'module',
filename: 'index.tsx',
plugins: [[BabelPluginReactCompiler, {}]],
presets: [
['typescript', { isTSX: true, allExtensions: true }],
['react', { runtime: 'automatic' }],
],
});
`

Trade-offs

- Best for browser runtime tooling; for Node build pipelines, upstream is usually the better default.
- Ships compiler logic to the client, so bundle size is higher than build-time-only setups.
- It tracks upstream behavior, but there can be short lag between upstream changes and browser package updates.

License

MIT for package glue/build scripts.
Vendored React compiler source follows React license (LICENSE.react`).