> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# Application-Level Modules

Modern.js provides runtime APIs to quickly export application-level Module Federation modules from your application.

We use the application created in [Using Module Federation](/guides/topic-detail/module-federation/usage.md) as an example to further explain how to import application-level modules.

## Exporting Modules from Producer

Unlike directly exporting component-level modules, we need to create a separate entry for application-level modules to be exported via `Module Federation`.

We create the `src/export-App.tsx` file:

:::note
The filename can be arbitrary; Modern.js does not enforce a specific naming convention.
:::

```ts title="src/export-App.tsx"
import '@modern-js/runtime/registry/index'; // This line must be included, it will import micro frontend runtime dependencies by default
import { render } from '@modern-js/runtime/browser';
import { createRoot } from '@modern-js/runtime/react';
import { createBridgeComponent } from '@module-federation/modern-js-v3/react-v19';

const ModernRoot = createRoot();
export const provider = createBridgeComponent({
  rootComponent: ModernRoot,
  render: (Component, dom) => render(Component, dom),
});

export default provider;
```

:::note
Please select the corresponding import path based on the React version used in your project:

- **React 19**: Use `@module-federation/modern-js-v3/react-v19`
- **React 18**: Use `@module-federation/modern-js-v3/react-v18`

You can check the React version in your project's `package.json` file to determine which import path to use.
:::

This file will pass the root component of the `main` entry application to the Bridge API and render it to the specified node via Bridge's render function.

Next, we configure `module-federation.config.ts` to modify the export to `src/export-App.tsx`:

```ts title="module-federation.config.ts"
import { createModuleFederationConfig } from '@module-federation/modern-js-v3';

export default createModuleFederationConfig({
  name: 'remote',
  manifest: {
    filePath: 'static',
  },
  filename: 'static/remoteEntry.js',
  exposes: {
    './app': './src/export-App.tsx',
  },
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true },
  },
});
```

:::info
[`createBridgeComponent`](https://module-federation.io/guide/bridge/overview#core-apis) is used to export application-level modules. Modern.js related APIs can be found at [createRoot](/apis/app/runtime/core/create-root.md) and [render](/apis/app/runtime/core/render.md).
:::

## Using Modules in Consumer

We then modify the consumer configuration by removing the previously created `src/routes/remote/page.tsx` route file.

We want all routes that access `/remote` to enter the aforementioned application-level module, so we add `src/routes/remote/$.tsx` instead.

:::note
If you are not familiar with the capabilities of `$.tsx`, please read [Wildcard Routes](/guides/basic-features/routes/routes.md#wildcard-routes).
:::

```tsx title="src/routes/remote/$.tsx"
import { createRemoteAppComponent } from '@module-federation/modern-js-v3/react';
import { loadRemote } from '@module-federation/modern-js-v3/runtime';

const ErrorBoundary = (info?: { error: { message: string } }) => {
  return (
    <div>
      <h2>This is ErrorBoundary Component, Something went wrong:</h2>
      <pre style={{ color: 'red' }}>{info?.error.message}</pre>
    </div>
  );
};
const Loading = <div>loading...</div>;
const RemoteApp = createRemoteAppComponent({
  loader: () => loadRemote('remote/app'),
  fallback: ErrorBoundary,
  loading: Loading,
});

export default RemoteApp;
```

:::info
[`createRemoteAppComponent`](https://module-federation.io/guide/bridge/overview#core-apis) is used to load application-level modules.
:::

## Start the Application

Now, both the producer and consumer applications are set up. We can run `modern dev` locally to start both applications.

After startup, when the consumer application accesses the `/remote` route, it will enter the producer application. Accessing `http://localhost:8080/remote` will display a complete page of the producer's remote module in the browser.

You can create new route files in the producer application and add route navigation in the code. These functionalities will also work as expected.

You can refer to the example here: [Modern.js & Module Federation Application-Level Modules](https://github.com/web-infra-dev/modern.js/tree/main/examples/module-federation/app-export).

## Related Documentation

- [Module Federation Bridge](https://module-federation.io/guide/bridge/overview)