#Migrating to Rspack

This guide will help you migrate your React Native project from using webpack to Rspack with Re.Pack.

#Update dependencies inpackage.json

To use Rspack, you'll need to update your dependencies by adding the following:

npm install -D @rspack/core @swc/helpers

#Updatereact-native.config.js

Since Re.Pack now supports multiple bundlers, you need to specify that you want to use Rspack commands explicitly. Update your react-native.config.js file to use Rspack commands:

module.exports = {
-  commands: require('@callstack/repack/commands/webpack'),
+  commands: require('@callstack/repack/commands/rspack'),
};

#Updating configuration

#1. Rename your configuration file

Rename your configuration file to match the Rspack convention:

• 📄 webpack.config.js → rspack.config.js
• 📄 webpack.config.mjs → rspack.config.mjs
• 📄 webpack.config.cjs → rspack.config.cjs

#2. Update your configuration

When migrating from webpack to Rspack, you'll need to make several changes to your configuration file.

#RemoveTerserPlugin import and configuration

Rspack uses SwcJsMinimizerRspackPlugin for minification, which is much faster than TerserPlugin and comes configured by default. You can remove both the TerserPlugin import and its configuration.

- const TerserPlugin = require('terser-webpack-plugin');
  const Repack = require('@callstack/repack');

  module.exports = (env) => {
    return {
-     optimization: {
-       minimizer: [
-         new TerserPlugin({
-           test: /\.(js)?bundle(\?.*)?$/i,
-           extractComments: false,
-           terserOptions: {
-             format: {
-               comments: false,
-             },
-           },
-         }),
-       ],
-     },
    };
  };

#Replacebabel-loader withgetJsTransformRules

Rspack uses SWC for transpilation instead of Babel. The getJsTransformRules() helper function configures all necessary JavaScript/TypeScript transformation rules.

module: {
  rules: [
-   {
-     test: /\.[cm]?[jt]sx?$/,
-     use: 'babel-loader',
-     type: 'javascript/auto',
-   },
+   ...Repack.getJsTransformRules(),
    ...Repack.getAssetTransformRules(),
  ],
},

#Configure Flow support (if needed)

If your project uses Flow for type checking, you'll need to add a dedicated loader since SWC (used by Rspack) doesn't support Flow natively. Re.Pack provides a @callstack/repack/flow-loader to strip Flow type annotations from your code. Add the following rule to your module configuration:

module.exports = {
  module: {
    rules: [
      ...Repack.getJsTransformRules(),
      ...Repack.getAssetTransformRules(),
+     {
+       test: /\.jsx?$/,
+       type: 'javascript/auto',
+       exclude: /node_modules/,
+       use: {
+         loader: '@callstack/repack/flow-loader',
+         options: { all: true },
+       },
+     },
    ],
  },
};

#Use@callstack/repack-plugin-reanimated

If your project uses react-native-reanimated, we provide an official plugin to ensure optimal performance when bundling with Rspack.

To add the Re.Pack Reanimated plugin to your project:

npm install -D @callstack/repack-plugin-reanimated

Then update your Rspack configuration file to include the plugin:

const Repack = require('@callstack/repack');
const { ReanimatedPlugin } = require('@callstack/repack-plugin-reanimated');

module.exports = (env) => {
  return {
    plugins: [
      new Repack.RepackPlugin(),
      new ReanimatedPlugin(),
    ],
  };
};

For more details on using Reanimated with Re.Pack & Rspack, see our Reanimated support page.

#Running your app

After migration, you can run the development server using the same command as before:

npx react-native start

Same goes for creating a production bundle:

npx react-native bundle

#Cleanup

After successfully migrating to Rspack and confirming that your app runs correctly, you can remove webpack-related dependencies that are no longer needed:

npm uninstall webpack terser-webpack-plugin