or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-rsbuild--plugin-react

React plugin for Rsbuild providing JSX compilation, React Fast Refresh, and chunk splitting optimizations

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@rsbuild/plugin-react@1.4.x

To install, run

npx @tessl/cli install tessl/npm-rsbuild--plugin-react@1.4.0

index.mddocs/

@rsbuild/plugin-react

@rsbuild/plugin-react provides comprehensive React support for Rsbuild, including JSX compilation, React Fast Refresh for hot reloading during development, and React Profiler integration for performance analysis. The plugin offers configurable chunk splitting for React-related dependencies and seamless integration with Rsbuild's build pipeline.

Package Information

  • Package Name: @rsbuild/plugin-react
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @rsbuild/plugin-react --save-dev

Core Imports

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

For CommonJS:

const { pluginReact } = require("@rsbuild/plugin-react");

Basic Usage

import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";

export default defineConfig({
  plugins: [pluginReact()],
});

With configuration options:

import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";

export default defineConfig({
  plugins: [
    pluginReact({
      fastRefresh: true,
      enableProfiler: false,
      splitChunks: {
        react: true,
        router: true,
      },
      swcReactOptions: {
        runtime: "automatic",
        development: true,
      },
    }),
  ],
});

Capabilities

Plugin Factory Function

Creates a React plugin instance for Rsbuild with customizable options.

/**
 * Creates a React plugin for Rsbuild
 * @param options - Optional configuration for React support
 * @returns RsbuildPlugin instance
 */
function pluginReact(options?: PluginReactOptions): RsbuildPlugin;

Configuration Options

Complete configuration interface for customizing React support.

interface PluginReactOptions {
  /**
   * Configure the behavior of SWC to transform React code,
   * the same as SWC's jsc.transform.react configuration
   */
  swcReactOptions?: Rspack.SwcLoaderTransformConfig["react"];

  /**
   * Configuration for chunk splitting of React-related dependencies
   */
  splitChunks?: SplitReactChunkOptions;

  /**
   * When set to true, enables the React Profiler for performance analysis in production builds
   * @default false
   */
  enableProfiler?: boolean;

  /**
   * Options passed to @rspack/plugin-react-refresh
   * @default { include: [/\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/], exclude: [/[\\/]node_modules[\\/]/], resourceQuery: { not: /raw/ } }
   */
  reactRefreshOptions?: ReactRefreshOptions;

  /**
   * Whether to enable React Fast Refresh in development mode
   * @default true
   */
  fastRefresh?: boolean;
}

Chunk Splitting Configuration

Configuration for splitting React and routing dependencies into separate chunks.

interface SplitReactChunkOptions {
  /**
   * Whether to enable split chunking for React-related dependencies (e.g., react, react-dom, scheduler)
   * @default true
   */
  react?: boolean;

  /**
   * Whether to enable split chunking for routing-related dependencies (e.g., react-router, react-router-dom, history)
   * @default true
   */
  router?: boolean;
}

Plugin Identifier

Constant identifier for the React plugin.

/**
 * Identifier for the React plugin
 */
const PLUGIN_REACT_NAME = "rsbuild:react";

Types

External Type References

The plugin uses types from external packages that are available when using Rsbuild:

// From @rsbuild/core
interface RsbuildPlugin {
  name: string;
  setup(api: RsbuildPluginAPI): void;
}

// From @rspack/plugin-react-refresh (imported as ReactRefreshOptions)
interface ReactRefreshOptions {
  include?: RegExp[];
  exclude?: RegExp[];
  resourceQuery?: { not: RegExp };
}

// From @rsbuild/core (Rspack configuration)
interface SwcLoaderTransformConfig {
  react?: {
    development?: boolean;
    refresh?: boolean;
    runtime?: "automatic" | "classic";
    importSource?: string;
  };
}

Usage Examples

Basic React App Setup

import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";

export default defineConfig({
  plugins: [pluginReact()],
  html: {
    template: "./src/index.html",
  },
  source: {
    entry: {
      index: "./src/index.tsx",
    },
  },
});

Development with Custom Fast Refresh Options

import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";

export default defineConfig({
  plugins: [
    pluginReact({
      fastRefresh: true,
      reactRefreshOptions: {
        include: [/\.tsx?$/],
        exclude: [/node_modules/, /\.stories\./],
      },
    }),
  ],
});

Production with Profiler Enabled

import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";

export default defineConfig({
  plugins: [
    pluginReact({
      enableProfiler: process.env.NODE_ENV === "production",
      splitChunks: {
        react: true,
        router: false, // Disable router splitting if not needed
      },
    }),
  ],
});

Custom SWC React Configuration

import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";

export default defineConfig({
  plugins: [
    pluginReact({
      swcReactOptions: {
        runtime: "classic", // Use classic JSX runtime
        importSource: "@emotion/react", // Custom JSX import source
        development: false, // Force production mode
      },
    }),
  ],
});

Disabling Chunk Splitting

import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";

export default defineConfig({
  plugins: [
    pluginReact({
      splitChunks: {
        react: false,
        router: false,
      },
    }),
  ],
});

Environment-Specific Configuration

The plugin can be applied to specific environments in multi-environment builds:

import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";

export default defineConfig({
  environments: {
    web: {
      plugins: [
        pluginReact({
          fastRefresh: true,
          enableProfiler: false,
        }),
      ],
      output: {
        target: "web",
      },
    },
    node: {
      // React plugin not needed for Node.js builds
      output: {
        target: "node",
      },
    },
  },
});

Key Features

  • JSX/TSX Compilation: Automatic JSX and TSX file processing via SWC transformer
  • React Fast Refresh: Hot reloading with state preservation during development
  • React Profiler: Production profiling support with optimized minification settings
  • Intelligent Chunk Splitting: Separates React and routing dependencies for optimal loading
  • TypeScript Support: Full TypeScript integration with proper syntax parsing
  • Flexible Configuration: Comprehensive options for customizing React support behavior
  • Environment Awareness: Automatically adjusts behavior based on development/production mode
  • HMR Integration: Seamless integration with Rsbuild's Hot Module Replacement system