#ModuleFederationV2Plugin

This plugin is designed to configure Module Federation 2.0. It's an enhanced version of the standard Module Federation plugin that's specifically tailored for React Native environments.

#Mobile MF Quirks

The plugin extends the standard Module Federation 2.0 plugin with functionality specific to mobile React Native apps:

1. Default Shared Dependencies - Adds react and react-native as shared dependencies with singleton: true and eager: true by default.
2. Default Share Strategy - Uses loaded-first share strategy by default.
3. Default Runtime Plugins - Comes with pre-configured runtime plugins for React Native:
   • @callstack/repack/mf/core-plugin - Core functionality
   • @callstack/repack/mf/resolver-plugin - React Native-specific module resolution
4. React Native Deep Imports Support - Automatically handles sharing of deep imports from React Native core and official packages.
5. Container Name Validation - Enforces valid JavaScript identifiers for container names (name option) to prevent runtime issues

#Installation

First, install the official @module-federation/enhanced package which is required by Re.Pack:

npm install @module-federation/enhanced

If you would like to use the runtime capabilites of MF2 (like adding remotes on the fly), you should install the @module-federation/runtime package as well:

npm install @module-federation/runtime

#Usage

const Repack = require("@callstack/repack");

module.exports = {
  output: {
    // set uniqueName explicitly to make HMR works
    uniqueName: 'host',
  },
  plugins: [
    new Repack.plugins.ModuleFederationPluginV2({
      // options
    }),
  ],
};

#Configuration

#reactNativeDeepImports

• Type: boolean
• Default: true

Enable or disable adding React Native deep imports to shared dependencies. When enabled, the plugin will automatically add:

• react-native/ for deep imports from React Native core
• @react-native/ for deep imports from official React Native packages

This ensures proper sharing of deep imports and single instances of things like assetsRegistry.

// Deep import from React Native core
import { PixelRatio } from "react-native/Libraries/Utilities/PixelRatio";

// Deep import from React Native package
import { something } from "@react-native/assets-registry";

#defaultRuntimePlugins

• Type: string[]
• Default: ["@callstack/repack/mf/core-plugin", "@callstack/repack/mf/resolver-plugin"]

List of default runtime plugins for Federation Runtime. These plugins provide core functionality and React Native-specific resolution for Module Federation.

You can modify this list to:

• Disable default plugins by providing an empty array
• Replace default plugins with your own implementation

new Repack.plugins.ModuleFederationPluginV2({
  name: "host",
  // Disable default plugins completely
  defaultRuntimePlugins: [],

  // Or use only the core plugin
  defaultRuntimePlugins: ["@callstack/repack/mf/core-plugin"],
});

#Examples

#Host Configuration

new Repack.plugins.ModuleFederationPluginV2({
  name: "host",
  remotes: {
    module1: "module1@http://example.com/module1.container.bundle",
  },
  shared: {
    react: { singleton: true, eager: true },
    "react-native": { singleton: true, eager: true },
  },
});

#Remote Configuration

new Repack.plugins.ModuleFederationPluginV2({
  name: "module1",
  filename: "module1.container.bundle",
  exposes: {
    "./entry": "./src/entry.js",
  },
  shared: {
    react: { singleton: true, eager: false },
    "react-native": { singleton: true, eager: false },
  },
});

Need React or React Native expertise you can count on?

Let's talkLet's talk