#Solid plugin

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

#Quick start

#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 beta. To use Solid v2, install the beta version of @rsbuild/plugin-solid:

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

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

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

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

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

#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.

#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

These options are passed to babel-preset-solid. For details, see the babel-preset-solid documentation.

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

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

solidPresetOptions is a deprecated alias for solid. Use solid instead. If both options are set, solid takes precedence.