tools.swc

  • Type: Object | Function
  • Version: >= 0.4.11
  • Default:
const defaultOptions = {
  jsc: {
    externalHelpers: true,
    parser: {
      tsx: false,
      syntax: 'typescript',
      decorators: true,
    },
    preserveAllComments: true,
  },
  isModule: 'unknown',
  // ...some other conditional options
};

You can set the options of builtin:swc-loader through tools.swc.

TIP

Rsbuild uses builtin:swc-loader by default to transform JavaScript code. It is the Rust version of swc-loader, and its options align with the JS version of swc-loader.

Object Type

tools.swc can be configured as an object, this object will be deeply merged with the built-in builtin:swc-loader option.

export default {
  tools: {
    swc: {
      jsc: {
        externalHelpers: false,
      },
    },
  },
};

Function Type

tools.swc can also be configured as a function, this function takes one argument, which is the built-in builtin:swc-loader option. You can modify this object then return a new config. For example:

export default {
  tools: {
    swc: (config) => {
      config.jsc ||= {};
      config.jsc.externalHelpers = false;
      return config;
    },
  },
};
TIP

The object returned by the tools.swc function will be used directly as the final builtin:swc-loader option, and will not be merged with the built-in builtin:swc-loader option anymore.

Example

Register SWC Plugin

tools.swc can be used to register SWC's Wasm plugins, for example, registering @swc/plugin-styled-jsx:

export default {
  tools: {
    swc: {
      jsc: {
        experimental: {
          plugins: [['@swc/plugin-styled-jsx', {}]],
        },
      },
    },
  },
};

Please note that SWC's wasm plugins are currently not backward compatible, and there is a certain binding relationship between the SWC plugin and the version of @swc/core that Rspack depends on. Therefore, you must select the SWC plugin that matches the current version of @swc/core for SWC to work.

For more information, refer to SWC - Selecting the version.

Enable Emotion Support

Example of enabling the Emotion support using the builtin:swc-loader:

export default {
  tools: {
    swc: {
      jsc: {
        experimental: {
          plugins: [['@swc/plugin-emotion', {}]],
        },
      },
    },
  },
};

For more options, please refer to @swc/plugin-emotion.

Enable Relay Support

Example of enabling the Relay support using the builtin:swc-loader:

export default {
  tools: {
    swc: {
      rspackExperiments: {
        relay: true,
      },
    },
  },
};

For more options, please refer to Rspack - rspackExperiments.relay.