Preact Plugin#

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 add @rsbuild/plugin-preact -D

Register Plugin#

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

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/],
});