Version: v5

getJsTransformRules

A helper function that generates Rspack module.rules configuration for transforming JavaScript, TypeScript, and Flow files. You can consider it an equivalent of @react-native/babel-preset, but for SWC.

INFO

This helper function combines other helper functions, preconfigured for convenience:

WARNING

This helper function is only relevant when using Rspack as your bundler. If you are using webpack with babel, you don't need to use this helper function, since it's already included as part of @react-native/babel-preset.

You can consider it an equivalent of @react-native/babel-preset, but for SWC.

Parameters

interface GetJsTransformRulesOptions {
  swc?: {
    disableImportExportTransform?: boolean;
    externalHelpers?: boolean;
    importSource?: string;
    jsxRuntime?: "automatic" | "classic";
    lazyImports?: boolean | string[];
  };
  flow?: {
    enabled?: boolean;
    include?: string[];
    exclude?: string[];
    all?: boolean;
    ignoreUninitializedFields?: boolean;
    removeEmptyImports?: boolean;
  };
  codegen?: {
    enabled?: boolean;
  };
}

options

  • Type: GetJsTransformRulesOptions
  • Required: false

Configuration options for JavaScript/TypeScript transformations

options.swc

  • Type: object
  • Default: {}

Configuration options for SWC transformations. For detailed documentation of the options, see getSwcLoaderOptions.

{
  swc: {
    disableImportExportTransform: false,
    externalHelpers: true,
    importSource: 'react',
    jsxRuntime: 'automatic',
    lazyImports: false,
  }
}

options.flow

  • Type: object

Configuration for enabling/disabling Flow transformations. When enabled, the transformation will be applied according to the configuration from getFlowTransformRules.

{
  flow: {
    enabled: true,
    include: FLOW_TYPED_MODULES,
    exclude: [],
    all: true,
    ignoreUninitializedFields: false,
    removeEmptyImports: true,
  }
}

options.flow.enabled

  • Type: boolean
  • Default: true

Whether to enable Flow transformations in the JavaScript transform pipeline.

options.codegen

  • Type: object

Configuration for enabling/disabling codegen transformations. When enabled, the transformation will be applied according to the configuration from getCodegenTransformRules.

{
  codegen: {
    enabled: true;
  }
}

options.codegen.enabled

  • Type: boolean
  • Default: true

Whether to enable codegen transformations in the JavaScript transform pipeline.

Example

rspack.config.cjs
const Repack = require("@callstack/repack");

module.exports = {
  module: {
    rules: [
      ...Repack.getJsTransformRules({
        swc: {
          jsxRuntime: "automatic",
          externalHelpers: true,
        },
        flow: {
          enabled: true,
          include: ["react-native"],
        },
        codegen: {
          enabled: true,
        },
      }),
    ],
  },
};