Using Rsbuild Plugin

Introduce Rsbuild Plugin

Rsbuild is the build tool of Modern.js. You can modify the default build behavior and add various additional features by adding the Rsbuild plugin, including but not limited to:

  • Modifying Rspack configurations
  • Processing new file types
  • Modifying or compiling files
  • Deploying artifacts

You can register the Rsbuild plugin through the builderPlugins option in modern.config.ts, see builderPlugins for details.


Modern.js has upgraded the build tool to Rsbuild starting from 2.46.0.

If your current version is lower than 2.46.0, you can upgrade by executing npx modern upgrade.

Official Plugins

Builtin Plugins

Here are the official Rsbuild plugins built into Modern.js:

Plugin Name Introduce Modern.js Link
React Plugin Provides support for React -
SVGR Plugin Support convert SVG to React components output.disableSvgr
Styled Components Plugin Provides compile-time support for styled-components tools.styledComponents
Assets Retry Plugin Used to automatically resend requests when static assets fail to load output.assetsRetry
Type Check Plugin Used to run TypeScript type checker on a separate process output.disableTsChecker
Node Polyfill Plugin Used to inject polyfills of Node core modules in the browser side output.disableNodePolyfill
Source Build Plugin Supports referencing source code from other subdirectories experiments.sourceBuild
Check Syntax Plugin Used to analyze the syntax compatibility of artifacts security.checkSyntax
CSS Minimizer Plugin Used to customize CSS minimizer, switch to cssnano or other tools for CSS compression tools.minifyCss
Pug Plugin Provides support for the Pug template engine tools.pug
Rem Plugin Implements the rem adaptive layout for mobile pages output.convertToRem
YAML Plugin Used to import YAML files and convert them into JavaScript objects TOML File
TOML Plugin Used to import TOML files and convert them into JavaScript objects YAML File

Un-builtin Plugins

Here are the official Rsbuild plugins that are not built into Modern.js: