https://github.com/SukkaW/react-compiler-webpack

The webpack/rspack loader for React Compiler
https://github.com/SukkaW/react-compiler-webpack

react react-compiler rspack rspack-loader webpack webpack-loader

Last synced: about 1 month ago
JSON representation

The webpack/rspack loader for React Compiler

• Host: GitHub
• URL: https://github.com/SukkaW/react-compiler-webpack
• Owner: SukkaW
• License: mit
• Created: 2024-05-16T06:10:59.000Z (7 months ago)
• Default Branch: master
• Last Pushed: 2024-10-29T19:00:30.000Z (about 2 months ago)
• Last Synced: 2024-11-08T11:47:05.894Z (about 2 months ago)
• Topics: react, react-compiler, rspack, rspack-loader, webpack, webpack-loader
• Language: TypeScript
• Homepage:
• Size: 522 KB
• Stars: 33
• Watchers: 1
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-rspack - react-compiler-webpack

README

        
# React Compiler for webpack

A webpack loader, a [rspack](https://www.rspack.dev/) loader that brings [the official React Compiler](https://react.dev/learn/react-compiler) to your project.

## Installation

```bash

# npm

npm i -D react-compiler-webpack

# yarn

yarn add -D react-compiler-webpack

# pnpm

pnpm add -D react-compiler-webpack

```

## Usage

### webpack/rspack

```js

// 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: [

      {

        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 integrated the React Compiler and can be enabled with the following configuration:

```js

// next.config.js

module.exports = {

  experimental: {

    reactCompiler: true // or React Compiler options

  }

}

```

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

```js

// 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](https://github.com/SukkaW), Released under the [MIT](./LICENSE) License.


Authored and maintained by Sukka with help from contributors ([list](https://github.com/SukkaW/react-compiler-webpack/graphs/contributors)).

> [Personal Website](https://skk.moe) · [Blog](https://blog.skk.moe) · GitHub [@SukkaW](https://github.com/SukkaW) · Telegram Channel [@SukkaChannel](https://t.me/SukkaChannel) · Twitter [@isukkaw](https://twitter.com/isukkaw) · Mastodon [@[email protected]](https://acg.mn/@sukka) · Keybase [@sukka](https://keybase.io/sukka)