sukkaw / react-compiler-webpack

The webpack/rspack loader for React Compiler

React Compiler for webpack

A webpack loader, a rspack loader that brings the official React Compiler to your project.

Installation

# npm
npm i -D react-compiler-webpack
# yarn
yarn add -D react-compiler-webpack
# pnpm
pnpm add -D react-compiler-webpack

Usage

webpack/rspack

// webpack.config.js / rspack.config.js

// You can leverage your IDE's Intellisense (autocompletion, type check, etc.) with the helper function `defineReactCompilerLoaderOption`:
const { defineReactCompilerLoaderOption, reactCompilerLoader } = require('react-compiler-webpack');

module.exports = {
  module: {
    rules: [
      rules: [
        {
          test: /\.[mc]?[jt]sx$/i,
          exclude: /node_modules/,
          use: [
            // babel-loader, swc-loader, esbuild-loader, or anything you like to transpile JSX should go here.
            // If you are using rspack, the rspack's buiilt-in react transformation is sufficient.
            // { loader: 'swc-loader' },
            // Now add forgetti-loader
            {
              loader: reactCompilerLoader,
              options: defineReactCompilerLoaderOption({
                // React Compiler options goes here
              })
            }
          ]
        }
      ]
    ]
  }
};

Next.js

Next.js has already intergrated the React Compiler and can be enabled with the following configuration:

// next.config.js
module.exports = {
  experimental: {
    reactCompiler: true // or React Compiler options
  }
}

Using Next.js built-in React Compiler intergration is highly recommended. But if you insist on going with react-compiler-webpack, you can follow use the provided Next.js plugin:

// next.config.js
const { withReactCompiler } = require('react-compiler-webpack');

module.exports = withReactCompiler({
  // React Compiler options goes here
})({
  // Next.js config goes here
});

Author

react-compiler-webpack © Sukka, Released under the MIT License.
Authored and maintained by Sukka with help from contributors (list).

Personal Website · Blog · GitHub @SukkaW · Telegram Channel @SukkaChannel · Twitter @isukkaw · Mastodon @[email protected] · Keybase @sukka