Docs
API
Blog
Version
Docs
API
Blog
Version: v5

BabelLoader

The BabelLoader runs Babel transformations for JavaScript and TypeScript sources in React Native projects. It chooses the parser based on source type: hermes-parser for JavaScript and Flow-typed files, and Babel's standard parser for TypeScript files.

How this loader differs from babel-loader

There are two similarly named loaders: @callstack/repack/babel-loader (this loader) and babel-loader from npm. This loader is tailored for Re.Pack and aims for Metro parity, so the same Babel config used in Metro works as-is in Re.Pack. It automatically selects the parser by source type (Hermes parser for JS/JSX and Flow, Babel parser for TypeScript).

It is also optimized for parallel transforms. In Rspack, enable experiments.parallelLoader to fan out transforms; in webpack, pair it with thread-loader to run a worker pool. On projects with heavier Babel pipelines, this often translates into noticeably faster builds.

Options

// All Babel options from `@babel/core` are supported
type BabelTransformOptions = import('@babel/core').TransformOptions

type BabelLoaderOptions = BabelTransformOptions & {
  babel?: boolean;
  flow?: "all" | "detect";
  reactRuntimeTarget?: "18" | "19";
  sourceType?: "module" | "script" | "unambiguous";
};

All options from the Babel options documentation are supported. See Babel TransformOptions below for more details.

hermesParserPath

  • Type: string

Optional path to use for importing hermes-parser. By default, the path is obtained automatically.

hermesParserOverrides

  • Type: HermesParserOverrides
  • Default: { babel: true, reactRuntimeTarget: '19' }

Overrides passed to hermes-parser when parsing non-TypeScript files.

type HermesParserOverrides = {
  babel?: boolean;
  flow?: "all" | "detect";
  reactRuntimeTarget?: "18" | "19";
  sourceType?: "module" | "script" | "unambiguous";
};

Babel TransformOptions

You can pass any standard Babel options (e.g. presets, plugins, overrides, etc.). Source maps are enabled automatically for application code and disabled for node_modules by default.

Example

rspack.config.mjs
export default {
  module: {
    rules: [
      {
        test: /\.[cm]?[jt]sx?$/,
        type: "javascript/auto",
        use: {
          loader: "@callstack/repack/babel-loader",
          options: {
            presets: ["module:@react-native/babel-preset"],
            plugins: ["react-native-reanimated/plugin"],
            comments: true
          },
        },
      },
    ],
  },
};

Need React or React Native expertise you can count on?

Let's talkLet's talk
Need to boost your app's performance?
We help React Native teams enhance speed, responsiveness, and efficiency.