react-compiler-webpack

1.0.0 verified Sat Apr 25 auth: no javascript

A webpack and rspack loader plugin that integrates the official React Compiler (React Forget) into your build pipeline. Version 1.0.0 provides a thin wrapper around babel-plugin-react-compiler, allowing automatic memoization of React components and hooks. It supports both webpack and rspack configurations, ships with TypeScript types, and requires babel-plugin-react-compiler as a peer dependency. Key differentiator: it is the only dedicated webpack loader for React Compiler, offering a simple setup with defineReactCompilerLoaderOption helper for type-safe options. Release cadence is stable with active maintenance on GitHub.

Common errors

error Module not found: Error: Can't resolve 'babel-plugin-react-compiler' ↓

cause Missing peer dependency babel-plugin-react-compiler.

fix

Run: npm i -D babel-plugin-react-compiler (or yarn/pnpm equivalent).

error TypeError: reactCompilerLoader is not a function ↓

cause Default import instead of named import for reactCompilerLoader.

fix

Use: const { reactCompilerLoader } = require('react-compiler-webpack');

error Option 'runtimeModules' is not allowed ↓

cause Passing React Compiler options incorrectly; they must be wrapped in defineReactCompilerLoaderOption() or passed as a plain object.

fix

Use defineReactCompilerLoaderOption({ runtimeModules: ... }) or pass the options object directly but ensure it matches the schema.

Warnings

gotcha Loader must be placed AFTER your JSX transpiler (e.g., babel-loader, swc-loader) in the loaders array, not before. ↓

fix Order the loaders as: [/* transpiler */, reactCompilerLoader] in the 'use' array.

deprecated react-compiler-webpack does not support configuration via ReactCompilerConfig in tsconfig.json or babel config; options must be passed via loader options. ↓

fix Use defineReactCompilerLoaderOption({...}) in the loader options.

gotcha babel-plugin-react-compiler must be installed as a peer dependency; auto-install may fail with npm <7 or yarn classic. ↓

fix Manually install babel-plugin-react-compiler as a dev dependency if not automatically installed.

gotcha Not compatible with webpack 4; requires webpack 5 or later (or rspack). ↓

fix Upgrade to webpack 5+ or use rspack.

Install

npm install react-compiler-webpack

yarn add react-compiler-webpack

pnpm add react-compiler-webpack

Imports

reactCompilerLoader

wrong

const reactCompilerLoader = require('react-compiler-webpack');

correct

const { reactCompilerLoader } = require('react-compiler-webpack');

Default export is an object, not the loader itself. Must destructure reactCompilerLoader.

defineReactCompilerLoaderOption
wrong
```
import defineReactCompilerLoaderOption from 'react-compiler-webpack';
```
correct
```
const { defineReactCompilerLoaderOption } = require('react-compiler-webpack');
```
This is a named export, not default. Also available via ESM: import { defineReactCompilerLoaderOption } from 'react-compiler-webpack';
reactCompilerLoader
```
import { reactCompilerLoader } from 'react-compiler-webpack';
```
ESM import works fine. TypeScript types are included.

Quickstart

Configures webpack to use react-compiler-webpack loader for automatic memoization of React components. Requires a JSX transpiler (e.g., babel-loader) placed before this loader in the use array.

// webpack.config.js
const { reactCompilerLoader, defineReactCompilerLoaderOption } = require('react-compiler-webpack');

module.exports = {
  module: {
    rules: [
      {
        test: /\.[mc]?[jt]sx?$/i,
        exclude: /node_modules/,
        use: [
          // Your existing JSX transpiler (e.g., babel-loader, swc-loader)
          // { loader: 'babel-loader' },
          {
            loader: reactCompilerLoader,
            options: defineReactCompilerLoaderOption({
              // React Compiler options
              // e.g., runtimeModules: { 'react': 'import React from "react"' }
            })
          }
        ]
      }
    ]
  }
};

// Then build with webpack as normal