This div is used to preload the font
Guide
Config
Plugin
API
Community
Guide
Config
Plugin
API
Community

Solid Plugin

The Solid plugin provides support for Solid features. The plugin internally integrates babel-preset-solid.

TIP

The Solid plugin relies on Babel transpilation and requires an additional Babel Plugin. At the same time, adding the Babel plugin will cause additional compilation overhead.

Quick Start

Install Plugin

You can install the plugin using the following command:

npm
yarn
pnpm
bun
npm add @rsbuild/plugin-babel @rsbuild/plugin-solid -D

Register Plugin

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

rsbuild.config.ts
import { pluginBabel } from '@rsbuild/plugin-babel';
import { pluginSolid } from '@rsbuild/plugin-solid';

export default {
  plugins: [
    pluginBabel({
      include: /\.(?:jsx|tsx)$/,
      exclude: /[\\/]node_modules[\\/]/,
    }),
    pluginSolid(),
  ],
};

After registering the plugin, you can directly develop Solid.

TIP

Since the Solid JSX relies on Babel for compilation, you need to additionally add the Babel plugin.

Babel compilation will introduce extra overhead, in the example above, we use include to match .jsx and .tsx files, thereby reducing the performance cost brought by Babel.

Options

If you need to customize the compilation behavior of Solid, you can use the following configs.

solidPresetOptions

Options passed to babel-preset-solid, please refer to the babel-preset-solid documentation for detailed usage.

  • Type: SolidPresetOptions
  • Default: {}
  • Example:
pluginSolid({
  solidPresetOptions: {
    generate: 'ssr',
    hydratable: true,
  },
});