#Solid plugin

The Solid plugin adds Solid JSX compilation, hot module replacement, and server-side rendering support to Rsbuild.

#Quick start

The following setup is for Solid v1. For Solid v2, see Solid v2.

#Install plugin

Run the following command:

npm add @rsbuild/plugin-babel @rsbuild/plugin-solid -D

yarn add @rsbuild/plugin-babel @rsbuild/plugin-solid -D

pnpm add @rsbuild/plugin-babel @rsbuild/plugin-solid -D

bun add @rsbuild/plugin-babel @rsbuild/plugin-solid -D

deno add npm:@rsbuild/plugin-babel npm:@rsbuild/plugin-solid -D

#Register plugin

Register the plugin in Rsbuild config:

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

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

After registration, you can develop Solid directly.

#Solid v2

Solid v2 support is currently in the release candidate (RC) stage and requires solid-js and @solidjs/web version 2.0.0-rc.6 or later. The default setup does not require @rsbuild/plugin-babel.

Install and register the RC version of @rsbuild/plugin-solid:

npm add @rsbuild/plugin-solid@rc -D

yarn add @rsbuild/plugin-solid@rc -D

pnpm add @rsbuild/plugin-solid@rc -D

bun add @rsbuild/plugin-solid@rc -D

deno add npm:@rsbuild/plugin-solid@rc -D

import { pluginSolid } from '@rsbuild/plugin-solid';

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

#Resolution behavior

The Solid plugin adds solid to Rsbuild's resolve.conditionNames. This allows package exports to resolve Solid-specific entries when they are available.

In development mode, the plugin also adds development to resolve Solid's development runtime and enables development-only compiler transforms. You can disable both behaviors with dev: false.

If you configure resolve.conditionNames, the plugin preserves your configured values and prepends these Solid conditions.

#Options

To customize the compilation behavior of Solid, use the following options.

#compiler

The JSX compiler backend. The native compiler is used by default. Set this option to 'babel' to compile JSX with @solidjs/babel-plugin instead.

• Type: 'native' | 'babel'
• Default: 'native'
• Version: >= 2.0.0
• Example:

pluginSolid({
  compiler: 'babel',
});

#extensions

Additional file extensions to compile as Solid JSX. The default .jsx and .tsx extensions are always included. Extensions must include the leading dot and are also added to module resolution, so imports can omit them.

.mtsx and .ctsx files are parsed as TypeScript with JSX; other additional extensions are parsed as JavaScript with JSX. This option applies to both JSX compilation and Solid Refresh.

• Type: string[]
• Default: []
• Version: >= 2.0.0
• Example:

pluginSolid({
  extensions: ['.mjsx', '.cjsx', '.mtsx', '.ctsx', '.solid'],
});

#dev

Whether to enable Solid's development runtime and development-only compiler transforms. Set it to false to disable both behaviors in development mode, or set it to true to enable them in production mode.

If solid.dev is explicitly configured, it overrides the dev setting for compiler transforms without affecting runtime resolution.

• Type: boolean
• Default: true in development mode, false in production mode
• Example:

pluginSolid({
  dev: false,
});

#refresh.disabled

Whether to disable Solid Refresh for HMR in development mode. This only controls the refresh transform and does not disable Rsbuild HMR.

• Type: boolean
• Default: false
• Example:

pluginSolid({
  refresh: {
    disabled: true,
  },
});

#refresh.granular

Whether to emit per-component metadata so edits only remount components whose code changed.

• Type: boolean
• Default: true
• Version: >= 2.0.0
• Example:

pluginSolid({
  refresh: {
    granular: false,
  },
});

#ssr

Whether to generate output for Solid SSR. When enabled, the plugin uses generate: 'ssr' and hydratable: true for Node.js targets, and uses generate: 'dom' and hydratable: true for other targets.

Values in solid will override these defaults.

• Type: boolean
• Default: false
• Example:

pluginSolid({
  ssr: true,
});

#solid

Solid compiler options passed to the selected JSX compiler.

• Type: SolidPresetOptions
• Default: {}
• Example:

pluginSolid({
  solid: {
    generate: 'ssr',
    hydratable: true,
  },
});