Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 1 day 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 (6 months ago)
- Default Branch: master
- Last Pushed: 2024-10-29T19:00:30.000Z (14 days ago)
- Last Synced: 2024-11-08T11:47:05.894Z (5 days 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)
