close
logologo
Guide
Config
Plugin
API
Community
Version
Changelog
Rsbuild 0.x Doc
English
简体中文
Guide
Config
Plugin
API
Community
Changelog
Rsbuild 0.x Doc
English
简体中文
logologo

Plugins

Plugin list
React plugin
SVGR plugin
Vue plugin
Preact plugin
Svelte plugin
Solid plugin
Babel plugin
Sass plugin
Less plugin
Stylus plugin

Development

Plugin development
Plugin API
Plugin hooks
📝 Edit this page on GitHub
Previous PageVue plugin
Next PageSvelte plugin

#Preact plugin

Source

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

#Quick start

#Install plugin

You can install the plugin using the following command:

npm
yarn
pnpm
bun
npm add @rsbuild/plugin-preact -D

#Register plugin

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

rsbuild.config.ts
import { pluginPreact } from '@rsbuild/plugin-preact';

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

After registering the plugin, you can directly develop Preact.

#Options

#reactAliasesEnabled

Whether to aliases react, react-dom to preact/compat.

  • Type: boolean
  • Default: true
  • Example: Disable aliases.
pluginPreact({
  reactAliasesEnabled: false,
});

#prefreshEnabled

Whether to inject Prefresh for HMR.

  • Type: boolean
  • Default: true
  • Version: >= v1.1.0
  • Example: Disable Prefresh.
pluginPreact({
  prefreshEnabled: false,
});

#include

Include files to be processed by the @rspack/plugin-preact-refresh plugin. The value is the same as the rule.test option in Rspack.

  • Type: RuleSetCondition
  • Default: /\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/
  • Version: >= v1.1.0
pluginPreact({
  include: [/\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/, /some-other-module/],
});

#exclude

Exclude files from being processed by the @rspack/plugin-preact-refresh plugin. The value is the same as the rule.exclude option in Rspack.

  • Type: RuleSetCondition
  • Default: /[\\/]node_modules[\\/]/
  • Version: >= v1.1.0
pluginPreact({
  exclude: [/[\\/]node_modules[\\/]/, /some-other-module/],
});