SWC Plugins

Apply compiler transforms — Relay, emotion, styled-components, and more — to every file in both the client and SSR bundles via the swcPlugins option.

Configuration

Add plugins to hadars.config.ts. Each entry is a tuple of [packageName, pluginOptions], the same format rspack and Next.js use for SWC plugins.

import type { HadarsOptions } from 'hadars';

const config: HadarsOptions = {
    entry: 'src/App.tsx',
    swcPlugins: [
        ['@swc/plugin-relay', {
            rootDir: process.cwd(),
            artifactDirectory: 'src/__generated__',
            language: 'typescript',
        }],
    ],
};

export default config;

Version compatibility

SWC plugins are native WebAssembly modules compiled against a specific version of swc_core. A version mismatch causes a silent failure or a hard crash at build time — there is no graceful error. You must install the exact version that matches rspack's internal SWC.

Install the exact version listed — do not use latest or a semver range such as ^10.0.0. The table below is for @rspack/core@1.6.8. For other rspack versions check plugins.swc.rs.

PluginExact version
@swc/plugin-relay10.0.0
@swc/plugin-emotion12.0.0
@swc/plugin-styled-components10.0.0
@swc/plugin-styled-jsx11.0.0
@swc/plugin-jest10.0.0
@swc/plugin-formatjs7.0.0
@swc/plugin-transform-imports10.0.0
@swc/plugin-loadable-components9.0.0
@swc/plugin-prefresh10.0.0
swc-plugin-css-modules6.0.0
swc-plugin-pre-paths6.0.0
swc-plugin-transform-remove-imports7.0.0
@lingui/swc-plugin5.9.0

The @swc/core package in hadars's optionalDependencies is used only by hadars's own loader for AST transforms. It is a separate concern from the SWC version bundled inside rspack that executes your plugins — you do not need them to match.

Example: Relay

Install the exact compatible version:

bun add -d @swc/plugin-relay@10.0.0

Configure in hadars.config.ts:

import type { HadarsOptions } from 'hadars';

const config: HadarsOptions = {
    entry: 'src/App.tsx',
    swcPlugins: [
        ['@swc/plugin-relay', {
            rootDir: process.cwd(),
            artifactDirectory: 'src/__generated__',
            language: 'typescript',
        }],
    ],
};

export default config;

Relay components that use loadModule for code splitting will have the Relay transform applied during the rspack SSR build, so fragment references and generated types resolve correctly on both client and server.