#Preact plugin

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

#Quick start

#Install plugin

Run the following command:

npm add @rsbuild/plugin-preact -D

yarn add @rsbuild/plugin-preact -D

pnpm add @rsbuild/plugin-preact -D

bun add @rsbuild/plugin-preact -D

deno add npm:@rsbuild/plugin-preact -D

#Register plugin

Register the plugin in Rsbuild config:

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

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

After registration, you can develop Preact directly.

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

#preactRefreshOptions

Set the options for @rspack/plugin-preact-refresh. The value is passed to the Rspack plugin, and preactPath is automatically configured by Rsbuild.

• Type:

type PreactRefreshOptions = {
  // @link https://rspack.rs/config/module-rules#condition
  test?: Rspack.RuleSetCondition;
  include?: Rspack.RuleSetCondition | null;
  exclude?: Rspack.RuleSetCondition | null;
  overlay?: {
    module: string;
  };
};

• Default:

The default value is the same as @rspack/plugin-preact-refresh:

const defaultOptions = {
  test: /\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/,
  exclude: /node_modules/,
};

• Example:

pluginPreact({
  preactRefreshOptions: {
    test: /\.(?:jsx|tsx)$/,
    include: /src/,
    exclude: /node_modules/,
  },
});