Rspack provides two solutions to support React:
Rspack leverages SWC transformer for JSX/TSX.
Add builtin:swc-loader
loader to support jsx
and tsx
:
Refer to Builtin swc-loader for detailed configurations.
There are currently two ways to enable React Fast Refresh in Rspack:
In the early stage of Rspack, React Fast Refresh functionality was built into @rspack/dev-server and @rspack/core to provide an out-of-the-box experience for some projects. This means that if you are using @rspack/cli or @rspack/dev-server, React Fast Refresh is automatically enabled in development mode, ready for you to use directly in your projects. This enhanced the usability of Rspack for React projects but also led to various issues.
This approach made Rspack not entirely framework-agnostic. If you were using other frameworks like Vue, you had to manually disable React Fast Refresh functionality using builtins.react.refresh to avoid injecting React Fast Refresh-related code into some Vue modules.
Recognizing this issue, we aim to gradually transition users to a more correct approach through experiments.rspackFuture.disableTransformByDefault and @rspack/plugin-react-refresh, which represents the second method mentioned.
@rspack/plugin-react-refresh
depends on experiments.rspackFuture.disableTransformByDefault
First you need to install the dependencies:
Enabling React Fast Refresh functionality primarily involves two aspects: code injection and code transformation.
react-refresh
package, as well as some custom runtime code, all of which are integrated in the @rspack/plugin-react-refresh plugin and can be injected through this plugin.Compared to the previous approach, this method decouples the React Fast Refresh code injection logic from the transformation logic. The code injection logic is handled uniformly by the @rspack/plugin-react-refresh plugin, while the code transformation is handled by loaders. This means that this plugin can be used in conjunction with builtin:swc-loader
, swc-loader
, or babel-loader
:
builtin:swc-loader
, you can refer to the example at examples/react-refresh, When using with swc-loader
, simply replace builtin:swc-loader
with swc-loader
.babel-loader
, you can refer to the example at examples/react-refresh-babel-loaderReact Compiler is an experimental compiler introduced in React 19 that can automatically optimize your React code.
Before you start using React Compiler, it's recommended to read the React Compiler documentation to understand the functionality, current state, and usage of the React Compiler.
At present, React Compiler only supports Babel compilation, which may slow down the build time.
The steps to use React Compiler in Rspack:
react
and react-dom
to 19.babel-loader
in your Rspack config file:babel.config.js
and configure the plugins:You can refer to the following example projects:
SVGR is an universal tool for transforming Scalable Vector Graphics (SVG) files into React components.
The usage of SVGR with Rspack is exactly the same as with Webpack.
For detailed usage of SVGR, please refer to SVGR Documentation - Webpack.