React Plugin

The React plugin provides support for React, integrating features such as JSX compilation and React Refresh.

Quick Start

Install Plugin

You can install the plugin using the following command:

npm add @rsbuild/plugin-react -D

Register Plugin

You can register the plugin in the rsbuild.config.ts file:

import { pluginReact } from '@rsbuild/plugin-react';

export default {
  plugins: [pluginReact()],

After registering the plugin, you can directly develop React.



Configure the behavior of SWC to transform React code, the same as SWC's jsc.transform.react option.

  • Type:
interface SwcReactOptions {
  pragma?: string;
  pragmaFrag?: string;
  throwIfNamespace?: boolean;
  development?: boolean;
  useBuiltins?: boolean;
  refresh?: boolean;
  runtime?: 'automatic' | 'classic';
  importSource?: string;
  • Default:
const isDev = process.env.NODE_ENV === 'development';
const defaultOptions = {
  development: isDev,
  refresh: isDev,
  runtime: 'automatic',


  • Type: 'automatic' | 'classic'
  • Default: 'automatic'

By default, Rsbuild uses the new JSX runtime introduced in React 17, which is runtime: 'automatic'.

If your current React version is lower than 16.14.0, you can set runtime to 'classic':

  swcReactOptions: {
    runtime: 'classic',

React 16.14.0 can use the new JSX runtime.

When using the classic JSX runtime, you need to manually import React in your code:

import React from 'react';

function App() {
  return <h1>Hello World</h1>;


  • Type: string
  • Default: 'react'

When runtime is 'automatic', you can specify the import path of the JSX runtime through importSource.

For example, when using Emotion, you can set importSource to '@emotion/react':

  swcReactOptions: {
    importSource: '@emotion/react',


When chunkSplit.strategy set to split-by-experience, Rsbuild will automatically split react and router related packages into separate chunks by default:

  • lib-react.js: includes react, react-dom, and react's sub-dependencies (scheduler).
  • lib-router.js: includes react-router, react-router-dom, and react-router's sub-dependencies (history, @remix-run/router).

This option is used to control this behavior and determine whether the react and router related packages need to be split into separate chunks.

  • Type:
type SplitReactChunkOptions = {
  react?: boolean;
  router?: boolean;
  • Default:
const defaultOptions = {
  react: true,
  router: true,
  • Example:
  splitChunks: {
    react: false,
    router: false,