### Start Development Environment

Source: https://github.com/module-federation/core/blob/main/apps/modern-component-data-fetch/README.md

Commands to install dependencies, build the plugin, and start the development server.

```bash
# Root directory
pnpm i

nx build modern-js-plugin

pnpm run app:component-data-fetch:dev

open http://localhost:5001/
```

--------------------------------

### Initialize project with npm create

Source: https://github.com/module-federation/core/blob/main/packages/create-module-federation/README.md

Use the standard npm create command to start the interactive project setup wizard.

```bash
npm create module-federation@latest
```

--------------------------------

### Install Dependencies and Run Development Server

Source: https://github.com/module-federation/core/blob/main/apps/router-demo/README.md

Installs project dependencies using pnpm and starts the development server for the application router. Opens the application in the browser.

```bash
pnpm install
pnpm run app:router:dev

open http://localhost:2000/
open http://localhost:2100/
```

--------------------------------

### Start Development Server

Source: https://github.com/module-federation/core/blob/main/apps/esbuild/README.md

Runs the development server for the Module Federation core example. Navigate to the provided localhost URL to view the application.

```bash
pnpm start
```

--------------------------------

### Install Dependencies and Build

Source: https://github.com/module-federation/core/blob/main/apps/modernjs-ssr/README.md

Run these commands in the root directory to install dependencies, build the modern-js-plugin, and start the development server.

```bash
pnpm i

nx build modern-js-plugin

pnpm run app:modern:dev

open http://localhost:3050/
```

--------------------------------

### Complete Module Federation Setup with Recommended Patterns

Source: https://github.com/module-federation/core/blob/main/arch-doc/advanced-topics-original.md

Use this example for a complete Module Federation setup. It includes recommended patterns for error handling, performance monitoring, and development debugging. Ensure shared dependencies like React are configured for singleton and eager loading.

```typescript
const federationInstance = new ModuleFederation({
  name: 'my-app',
  remotes: [
    {
      name: 'remote-app',
      entry: 'https://example.com/remoteEntry.js'
    }
  ],
  shared: {
    react: { singleton: true, eager: true },
    'react-dom': { singleton: true, eager: true }
  },
  plugins: [
    // Error handling
    {
      name: 'ErrorHandler',
      errorLoadRemote: (args) => {
        console.error('Module load failed:', args.id);
        return () => 'Fallback Content';
      }
    },
    
    // Performance monitoring
    {
      name: 'PerformanceMonitor',
      beforeRequest: (args) => {
        performance.mark(`start-${args.id}`);
        return args;
      },
      onLoad: (args) => {
        performance.mark(`end-${args.id}`);
        return args;
      }
    },
    
    // Development debugging
    ...(process.env.NODE_ENV === 'development' ? [{
      name: 'DevDebugger',
      onLoad: (args) => {
        console.log('Loaded:', args.id);
        return args;
      }
    }] : [])
  ]
});
```

```typescript
// Preload critical modules
federationInstance.preloadRemote([
  { nameOrAlias: 'remote-app' }
]);
```

```typescript
// Load modules with error handling
async function loadComponent(id: string) {
  try {
    return await federationInstance.loadRemote(id);
  } catch (error) {
    console.error(`Failed to load ${id}:`, error);
    return null;
  }
}
```

--------------------------------

### Start Next.js Development Server

Source: https://github.com/module-federation/core/blob/main/apps/next-app-router/next-app-router-4000/readme.md

Run this command to start the Next.js development server. This command is used after installing dependencies.

```sh
pnpm dev
```

--------------------------------

### Build and Serve Provider (No Server)

Source: https://github.com/module-federation/core/blob/main/apps/shared-tree-shaking/README.md

Build and serve the provider application for the no-server Module Federation setup. Ensure the remote is started first.

```bash
nx run shared-tree-shaking-no-server-provider:build
```

```bash
nx run shared-tree-shaking-no-server-provider:serve
```

--------------------------------

### Runtime Module Registration Example

Source: https://github.com/module-federation/core/blob/main/apps/website-new/docs/en/guide/runtime/index.mdx

This example demonstrates how to dynamically register and load remote modules using the runtime API. It's useful when you need more flexibility than the build plugin offers, especially in environments without a compatible build setup.

```javascript
import Runtime from '@docs/en/_components/runtime/index';

<Runtime />
```

--------------------------------

### Rstest Global Setup Example

Source: https://github.com/module-federation/core/blob/main/packages/enhanced/rstestmigrate.md

Configuration to include Rstest global setup files, such as custom matchers and debug hooks, within the Rstest configuration. This ensures test environment consistency.

```json
{
  "setupFiles": [
    "test/setupTestFramework.js"
  ]
}
```

--------------------------------

### Start Runtime Demo

Source: https://github.com/module-federation/core/blob/main/apps/runtime-demo/README.md

Run this command to start the host, remote1, and remote2 applications for the runtime demo.

```bash
pnpm run app:runtime:dev
```

--------------------------------

### Install runtime-tools

Source: https://github.com/module-federation/core/blob/main/packages/runtime-tools/README.md

Use npm to install the runtime-tools package.

```bash
npm install @module-federation/runtime-tools
```

--------------------------------

### Run E2E Runtime Tests

Source: https://github.com/module-federation/core/blob/main/apps/runtime-demo/README.md

Installs dependencies, builds packages, starts host and remotes, and runs Cypress checks for the observability demo fixture.

```bash
pnpm run ci:local --only=e2e-runtime
```

--------------------------------

### Install Observability Plugin

Source: https://github.com/module-federation/core/blob/main/apps/website-new/docs/en/plugin/plugins/observability-plugin.mdx

Install the observability plugin using npm.

```bash
npm install @module-federation/observability-plugin
```

--------------------------------

### Start All Servers (With Server)

Source: https://github.com/module-federation/core/blob/main/apps/shared-tree-shaking/README.md

Use this command to start the Host, Provider, and re-shake static server for the advanced flow.

```bash
nx run shared-tree-shaking-with-server-host:serve:all
```

--------------------------------

### Loading UI Examples

Source: https://github.com/module-federation/core/blob/main/apps/website-new/docs/en/guide/bridge/react/load-app.mdx

Examples of how to specify the `loading` UI. This can be a React node, a string, or a component.

```typescript
loading: <div>Loading...</div>
```

```typescript
loading: 'Loading remote app...'
```

```typescript
loading: <Spinner />
```

--------------------------------

### Install @module-federation/metro-plugin-rnef

Source: https://github.com/module-federation/core/blob/main/packages/metro-plugin-rnef/README.md

Install the plugin as a development dependency.

```bash
npm install --save-dev @module-federation/metro-plugin-rnef
```

--------------------------------

### Install @module-federation/node

Source: https://github.com/module-federation/core/blob/main/packages/node/README.md

Install the package using npm or yarn.

```bash
npm install @module-federation/node
```

```bash
yarn add @module-federation/node
```

--------------------------------

### Install Dependencies

Source: https://github.com/module-federation/core/blob/main/apps/3001-shop/README.md

Run this command to install project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Install @module-federation/esbuild

Source: https://github.com/module-federation/core/blob/main/packages/esbuild/README.md

Use npm to install the plugin package.

```bash
npm install @module-federation/esbuild
```

--------------------------------

### Install @module-federation/enhanced

Source: https://github.com/module-federation/core/blob/main/apps/website-new/docs/en/guide/runtime/index.mdx

Install the enhanced package for general Module Federation usage. Import runtime APIs from '@module-federation/enhanced/runtime'.

```bash
npm install @module-federation/enhanced --save
yarn add @module-federation/enhanced --save
pnpm add @module-federation/enhanced --save
bun add @module-federation/enhanced --save
```

--------------------------------

### Install @module-federation/retry-plugin

Source: https://github.com/module-federation/core/blob/main/packages/retry-plugin/README.md

Install the retry plugin using npm, yarn, or pnpm.

```bash
npm install @module-federation/retry-plugin
# or
yarn add @module-federation/retry-plugin
# or
pnpm add @module-federation/retry-plugin
```

--------------------------------

### Install Node.js 20 LTS

Source: https://github.com/module-federation/core/blob/main/CONTRIBUTING.md

Commands to install and set the default Node.js version using nvm.

```bash
# Install Node.js 20 LTS
nvm install 20 --lts
nvm alias default 20
nvm use 20
```

--------------------------------

### Install styled-components

Source: https://github.com/module-federation/core/blob/main/apps/website-new/docs/en/guide/basic/css-isolate.mdx

Install the styled-components library using npm. This is the first step to using CSS-in-JS with this library.

```bash
npm install styled-components
```

--------------------------------

### Install Module Federation Storybook Addon

Source: https://github.com/module-federation/core/blob/main/packages/storybook-addon/README.md

Commands to install the addon using NPM or Yarn.

```shell
# with NPM
npm install @module-federation/storybook-addon

# with Yarn
yarn add @module-federation/storybook-addon
```

--------------------------------

### Install Core and Rock Packages

Source: https://github.com/module-federation/core/blob/main/apps/website-new/docs/en/integrations/bundler/metro.mdx

Install the core Module Federation package for Metro and the Rock integration plugin.

```shell
pnpm add @module-federation/metro
pnpm add @module-federation/metro-plugin-rock
```

--------------------------------

### Install Zephyr Webpack Plugin

Source: https://github.com/module-federation/core/blob/main/apps/website-new/docs/en/guide/deployment/zephyr.mdx

Install the Zephyr plugin for your bundler. This example shows installation for Webpack.

```bash
npm install zephyr-webpack-plugin
```

--------------------------------

### Setup Recommended Environment

Source: https://github.com/module-federation/core/blob/main/AGENTS.md

Use these commands to set up the recommended Node.js and pnpm environment for agents. This ensures consistency with the repository's CI setup.

```bash
corepack enable
pnpm install --frozen-lockfile
```

--------------------------------

### Build and Serve Host (With Server)

Source: https://github.com/module-federation/core/blob/main/apps/shared-tree-shaking/README.md

Build and serve the host application for the advanced Module Federation setup.

```bash
nx run shared-tree-shaking-with-server-host:build
```

```bash
nx run shared-tree-shaking-with-server-host:serve
```

--------------------------------

### Usage Examples

Source: https://github.com/module-federation/core/blob/main/arch-doc/sdk-reference.md

Illustrates how to use Module Federation with basic configuration and runtime initialization.

```APIDOC
## Usage Examples

### Basic Configuration

This example shows how to configure Module Federation with a host application and its remotes.

```typescript
import { ModuleFederationPluginOptions } from '@module-federation/sdk';

const config: ModuleFederationPluginOptions = {
  name: 'host-app',
  remotes: {
    mf1: 'mf1@http://localhost:3001/mf-manifest.json'
  },
  shared: {
    react: {
      singleton: true,
      requiredVersion: '^18.0.0'
    }
  }
};
```

### Runtime Usage

This example demonstrates initializing Module Federation at runtime and loading a remote module.

```typescript
import { init, loadRemote } from '@module-federation/runtime';

// Initialize federation
const federation = init({
  name: 'host',
  remotes: [
    {
      name: 'remote1',
      entry: 'http://localhost:3001/remoteEntry.js'
    }
  ]
});

// Load a remote module
const RemoteComponent = await loadRemote<React.ComponentType>('remote1/Component');
```
```

--------------------------------

### Initialize project with CLI flags

Source: https://github.com/module-federation/core/blob/main/packages/create-module-federation/README.md

Specify project directory, template, and name directly via command line arguments or their shorthand equivalents.

```bash
npx create-module-federation --dir my-project --template provider-modern --name provider

# Using abbreviations
npx create-module-federation -d my-project -t provider-modern -n provider
```

--------------------------------

### Build Provider (With Server)

Source: https://github.com/module-federation/core/blob/main/apps/shared-tree-shaking/README.md

Build the provider application, triggering tree-shaking for shared dependencies in the advanced setup.

```bash
nx run shared-tree-shaking-with-server-provider:build
```

--------------------------------

### Build Production Bundle

Source: https://github.com/module-federation/core/blob/main/apps/esbuild/README.md

Creates a production-ready bundle for the Module Federation core example. The output will be located in the 'dist' or '.next' folder.

```bash
pnpm build
```

--------------------------------

### Use Natural Language Queries with 'mf' Skill

Source: https://github.com/module-federation/core/blob/main/apps/website-new/docs/en/ai/skill.mdx

Examples of using the 'mf' skill with natural language questions to get assistance with Module Federation.

```text
/mf What's the difference between singleton and requiredVersion in shared?
```

```text
/mf Help me figure out why this project is not pulling remote types
```

```text
/mf Add Module Federation to the current project
```

```text
/mf I saw a Module Federation console error with traceId mf-...
```

--------------------------------

### Setup Schema Validation for Module Federation

Source: https://github.com/module-federation/core/blob/main/arch-doc/implementation-guide.md

Sets up JSON schema validation for Module Federation options using webpack utilities. Ensure schema-utils is installed.

```typescript
// utils.ts - Schema Validation Setup
import { normalizeWebpackPath } from '@module-federation/sdk/normalize-webpack-path';

const memoize = require(
  normalizeWebpackPath('webpack/lib/util/memoize')
) as typeof import('webpack/lib/util/memoize');

const getValidate = memoize(() => require('schema-utils').validate);

export const createSchemaValidation = (
  check: ((value: any) => boolean) | undefined,
  getSchema: () => any,
  options: any,
) => {
  getSchema = memoize(getSchema);
  return (value) => {
    if (check && !check(value)) {
      getValidate()(getSchema(), value, options);
    }
  };
};
```

--------------------------------

### Configure Module Federation

Source: https://github.com/module-federation/core/blob/main/apps/website-new/docs/en/integrations/framework/modernjs/index.mdx

Create a `module-federation.config.ts` file to define your Module Federation setup, including remote applications and shared dependencies. This example uses Modern.js v3.

```typescript
import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
export default createModuleFederationConfig({
  name: 'host',
  remotes: {
    remote: 'remote@http://localhost:3006/mf-manifest.json',
  },
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true },
  },
});
```

--------------------------------

### Build and Serve Host (No Server)

Source: https://github.com/module-federation/core/blob/main/apps/shared-tree-shaking/README.md

Build and serve the host application for the no-server Module Federation setup. This is the local development instance.

```bash
nx run shared-tree-shaking-no-server-host:build
```

```bash
nx run shared-tree-shaking-no-server-host:serve
```

--------------------------------

### Install native-federation-typescript

Source: https://github.com/module-federation/core/blob/main/packages/native-federation-typescript/README.md

Install the package as a development dependency.

```bash
npm i -D @module-federation/native-federation-typescript
```

--------------------------------

### Basic Configuration Example

Source: https://github.com/module-federation/core/blob/main/arch-doc/sdk-reference.md

Demonstrates how to define a basic Module Federation configuration for a host application.

```typescript
import { ModuleFederationPluginOptions } from '@module-federation/sdk';

const config: ModuleFederationPluginOptions = {
  name: 'host-app',
  remotes: {
    mf1: 'mf1@http://localhost:3001/mf-manifest.json'
  },
  shared: {
    react: {
      singleton: true,
      requiredVersion: '^18.0.0'
    }
  }
};
```

--------------------------------

### Module Federation Plugin Example with Library Configuration

Source: https://github.com/module-federation/core/blob/main/apps/website-new/docs/en/configure/library.mdx

Demonstrates how to configure the Module Federation plugin with a 'var' library type and a specific name.

```typescript
new ModuleFederationPlugin({
  name: '@demo/provider',
  library: { type: 'var', name: 'provider' },
  exposes: {
    './Button': './src/Button',
  },
});
```

--------------------------------

### Preview Production Build

Source: https://github.com/module-federation/core/blob/main/apps/router-demo/router-remote1-2001/README.md

Run this command to locally preview the production build before deployment.

```bash
pnpm preview
```

--------------------------------

### Install Plugin Dependencies

Source: https://github.com/module-federation/core/blob/main/tools/rslib-plugin/dist/README.md

Install the required core package for the plugin.

```bash
npm install @rslib/core
```

--------------------------------

### Install Federated Types Plugin

Source: https://github.com/module-federation/core/blob/main/packages/typescript/README.md

Install the package via npm.

```bash
$ npm i @module-federation/typescript
```

--------------------------------

### Install @module-federation/metro-plugin-rock

Source: https://github.com/module-federation/core/blob/main/packages/metro-plugin-rock/README.md

Install the plugin as a development dependency using npm.

```bash
npm install --save-dev @module-federation/metro-plugin-rock
```

--------------------------------

### Install @module-federation/metro-plugin-rnc-cli

Source: https://github.com/module-federation/core/blob/main/packages/metro-plugin-rnc-cli/README.md

Install the plugin as a development dependency using npm.

```bash
npm install --save-dev @module-federation/metro-plugin-rnc-cli
```

--------------------------------

### Examples of MF Agent Skill Usage

Source: https://github.com/module-federation/core/blob/main/skills/README.md

These examples demonstrate various sub-commands available for the Module Federation skill, including documentation queries, integration, type checking, dependency analysis, configuration checks, runtime error investigation, and observability.

```text
/mf docs What is the difference between singleton and requiredVersion?
```

```text
/mf integrate
```

```text
/mf type-check
```

```text
/mf shared-deps
```

```text
/mf config-check
```

```text
/mf runtime-error RUNTIME-008
```

```text
/mf observability
```

--------------------------------

### Module Federation Entrypoint After Async Startup

Source: https://github.com/module-federation/core/blob/main/apps/website-new/docs/en/blog/hoisted-runtime.mdx

Demonstrates the simplified entrypoint after enabling async startup. The dynamic import is no longer needed as initialization is handled asynchronously by default.

```jsx
// entrypoint
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root')!); 
root.render(
<React.StrictMode>
  <App />
</React.StrictMode>,
);
```

--------------------------------

### Install Node.js 20 LTS with nvm

Source: https://github.com/module-federation/core/blob/main/apps/website-new/docs/en/integrations/framework/nextjs/basic-example.mdx

Install the recommended Node.js 20 LTS version using nvm. This includes setting it as the default and switching to it.

```bash
# Install the long-term support version of Node.js 20
nvm install 20 --lts

# Make the newly installed Node.js 20 as the default version
nvm alias default 20

# Switch to the newly installed Node.js 20
nvm use 20
```

--------------------------------

### Install Enhanced Module Federation

Source: https://github.com/module-federation/core/blob/main/packages/rsbuild-plugin/README.md

Install the enhanced Module Federation package.

```bash
npm install @module-federation/enhanced
```

--------------------------------

### Install Rsbuild Plugin

Source: https://github.com/module-federation/core/blob/main/packages/rsbuild-plugin/README.md

Install the Rsbuild plugin for Module Federation as a development dependency.

```bash
npm install @module-federation/rsbuild-plugin -D
```

--------------------------------

### Module Federation Entrypoint Before Async Startup

Source: https://github.com/module-federation/core/blob/main/apps/website-new/docs/en/blog/hoisted-runtime.mdx

Illustrates the traditional approach requiring a dynamic import for initialization. This setup is necessary to avoid eager errors and establish async boundaries.

```jsx
// entrypoint
import('./bootstrap.js')
```

```jsx
// bootstrap.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root')!); 
root.render(
<React.StrictMode>
  <App />
</React.StrictMode>,
);
```

--------------------------------

### Install Vue Bridge

Source: https://github.com/module-federation/core/blob/main/apps/website-new/docs/en/integrations/practice/vue.mdx

Install the `@module-federation/bridge-vue3` package using your preferred package manager.

```bash
npm install @module-federation/bridge-vue3@latest
```

```bash
yarn add @module-federation/bridge-vue3
```

```bash
pnpm add @module-federation/bridge-vue3@latest
```

--------------------------------

### Complete Federation Manifest Example

Source: https://github.com/module-federation/core/blob/main/arch-doc/manifest-specification.md

A comprehensive JSON example demonstrating the full structure of a federation manifest, including remotes, exposes, shared dependencies, and snapshots.

```json
{
  "id": "host-app",
  "name": "Host Application",
  "metaData": {
    "version": "1.2.0",
    "buildVersion": "1.2.0-20240301.123456",
    "publicPath": "/",
    "mode": "production",
    "target": "web",
    "timestamp": 1709289296123,
    "bundler": {
      "name": "webpack",
      "version": "5.89.0"
    }
  },
  "remotes": [
    {
      "id": "shell",
      "name": "Shell Remote",
      "entry": "https://cdn.example.com/shell/remoteEntry.js",
      "entryGlobalName": "shell",
      "type": "var",
      "version": "2.1.0",
      "buildVersion": "2.1.0-20240301.098765",
      "publicPath": "https://cdn.example.com/shell/",
      "modules": [
        {
          "id": "./Header",
          "key": "./Header",
          "path": "src/components/Header.js",
          "size": 15420,
          "chunks": ["header_chunk"],
          "assets": [
            {
              "path": "header.css",
              "type": "css",
              "size": 2048
            }
          ]
        }
      ]
    }
  ],
  "exposes": [
    {
      "key": "./App",
      "module": "./src/App.tsx",
      "name": "Main Application",
      "type": "component",
      "dependencies": ["react", "react-dom"],
      "size": 45000
    }
  ],
  "shared": [
    {
      "name": "react",
      "version": "^18.0.0",
      "scope": "default",
      "singleton": true,
      "strictVersion": false,
      "eager": false,
      "requiredVersion": "18.2.0",
      "import": "react",
      "packageName": "react"
    }
  ],
  "runtimePlugins": [
    {
      "name": "error-boundary-plugin",
      "entry": "./plugins/errorBoundary.js",
      "version": "1.0.0",
      "priority": 10,
      "environment": ["development", "production"]
    }
  ],
  "snapshot": {
    "moduleInfo": {
      "shell": {
        "version": "2.1.0",
        "buildVersion": "2.1.0-20240301.098765",
        "modules": [
          {
            "id": "./Header",
            "key": "./Header",
            "path": "src/components/Header.js",
            "size": 15420
          }
        ]
      }
    },
    "preloadAssets": [
      {
        "url": "https://cdn.example.com/shell/remoteEntry.js",
        "type": "script",
        "priority": "high",
        "crossorigin": "anonymous"
      }
    ]
  }
}
```

--------------------------------

### Install @module-federation/modern-js-v3

Source: https://github.com/module-federation/core/blob/main/apps/website-new/docs/en/integrations/framework/modernjs/index.mdx

Use this command to install the Module Federation plugin for Modern.js v3.

```bash
npm add @module-federation/modern-js-v3 --save
```

```bash
yarn add @module-federation/modern-js-v3 --save
```

```bash
pnpm add @module-federation/modern-js-v3 --save
```

```bash
bun add @module-federation/modern-js-v3 --save
```

--------------------------------

### Direct Troubleshooting Workflow Examples

Source: https://github.com/module-federation/core/blob/main/apps/website-new/docs/en/ai/skill.mdx

These commands initiate direct troubleshooting for common Module Federation issues without prior manual investigation.

```text
/mf type-check
```

```text
/mf shared-deps
```

```text
/mf config-check
```

```text
/mf runtime-error RUNTIME-008
```

```text
/mf observability
```

--------------------------------

### Install Dependencies (Monorepo)

Source: https://github.com/module-federation/core/blob/main/apps/shared-tree-shaking/README.md

Run this command at the repository root to install all project dependencies.

```bash
pnpm i
```

--------------------------------

### Runtime Usage Example

Source: https://github.com/module-federation/core/blob/main/arch-doc/sdk-reference.md

Shows how to initialize the runtime and load a remote module dynamically.

```typescript
import { init, loadRemote } from '@module-federation/runtime';

// Initialize federation
const federation = init({
  name: 'host',
  remotes: [
    {
      name: 'remote1',
      entry: 'http://localhost:3001/remoteEntry.js'
    }
  ]
});

// Load a remote module
const RemoteComponent = await loadRemote<React.ComponentType>('remote1/Component');
```

--------------------------------

### Install @module-federation/modern-js

Source: https://github.com/module-federation/core/blob/main/apps/website-new/docs/en/integrations/framework/modernjs/index.mdx

Use this command to install the Module Federation plugin for Modern.js v2.56.1 and later.

```bash
npm add @module-federation/modern-js --save
```

```bash
yarn add @module-federation/modern-js --save
```

```bash
pnpm add @module-federation/modern-js --save
```

```bash
bun add @module-federation/modern-js --save
```

--------------------------------

### Install Module Federation Plugin

Source: https://github.com/module-federation/core/blob/main/apps/website-new/docs/en/integrations/bundler/webpack.mdx

Install the necessary package for Module Federation integration with Webpack.

```bash
npm install @module-federation/enhanced-next-plugin --save-dev
# or
yarn add @module-federation/enhanced-next-plugin --dev
```

--------------------------------

### Read Docs Workflow Example

Source: https://github.com/module-federation/core/blob/main/apps/website-new/docs/en/ai/skill.mdx

This command instructs the 'mf' skill to read the latest documentation to answer a specific question, ensuring accuracy.

```text
/mf docs What's the difference between singleton and requiredVersion in shared?
```

--------------------------------

### Create Federation Instance

Source: https://github.com/module-federation/core/blob/main/arch-doc/advanced-topics-original.md

Demonstrates the pattern for creating a Module Federation instance and registering plugins. Ensure plugins are passed in the `options.plugins` array.

```typescript
function createFederationInstance(options: UserOptions) {
  const instance = new ModuleFederation(options);
  
  // Real initialization pattern
  if (options.plugins) {
    options.plugins.forEach(plugin => {
      instance.registerPlugin(plugin);
    });
  }
  
  return instance;
}
```

--------------------------------

### Conventional Commit Example

Source: https://github.com/module-federation/core/blob/main/CONTRIBUTING.md

An example of a pull request title following the Conventional Commits format.

```text
feat(plugin-swc): Add `xxx` config
^    ^    ^
|    |    |__ Subject
|    |_______ Scope
|____________ Type
```

--------------------------------

### Install Native Federation Tests Plugin

Source: https://github.com/module-federation/core/blob/main/packages/native-federation-tests/README.md

Install the native federation tests plugin as a development dependency.

```bash
npm i -D @module-federation/native-federation-tests
```