> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# Solid plugin


[Source Code](https://github.com/web-infra-dev/rsbuild/tree/main/packages/plugin-solid)

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](#solid-v2).

### Install plugin

Run the following command:


```sh [npm]
npm add @rsbuild/plugin-babel @rsbuild/plugin-solid -D
```

```sh [yarn]
yarn add @rsbuild/plugin-babel @rsbuild/plugin-solid -D
```

```sh [pnpm]
pnpm add @rsbuild/plugin-babel @rsbuild/plugin-solid -D
```

```sh [bun]
bun add @rsbuild/plugin-babel @rsbuild/plugin-solid -D
```

```sh [deno]
deno add npm:@rsbuild/plugin-babel npm:@rsbuild/plugin-solid -D
```

### Register plugin

Register the plugin in Rsbuild config:

```ts title="rsbuild.config.ts"
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.

:::tip
Since the Solid JSX relies on Babel for compilation, you need to additionally add the [Babel plugin](/plugins/list/plugin-babel.md).

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.

:::

## 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`:


```sh [npm]
npm add @rsbuild/plugin-solid@rc -D
```

```sh [yarn]
yarn add @rsbuild/plugin-solid@rc -D
```

```sh [pnpm]
pnpm add @rsbuild/plugin-solid@rc -D
```

```sh [bun]
bun add @rsbuild/plugin-solid@rc -D
```

```sh [deno]
deno add npm:@rsbuild/plugin-solid@rc -D
```

```ts title="rsbuild.config.ts"
import { pluginSolid } from '@rsbuild/plugin-solid';

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

## Resolution behavior

The Solid plugin adds `solid` to Rsbuild's [resolve.conditionNames](/config/resolve/condition-names.md). 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`](#dev).

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:**

```ts
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:**

```ts
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:**

```ts
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:**

```ts
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:**

```ts
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`](#solid) will override these defaults.

- **Type:** `boolean`
- **Default:** `false`
- **Example:**

```ts
pluginSolid({
  ssr: true,
});
```

### solid

Solid compiler options passed to the selected JSX compiler.

- **Type:** `SolidPresetOptions`
- **Default:** `{}`
- **Example:**

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