@modern-js/main-doc 3.0.0 → 3.0.2

package/docs/en/configure/app/dev/server.mdx

@@ -28,7 +28,7 @@ export default {
 };
 ```
 
-For more details, please refer to the [Rsbuild - server.compress](https://rsbuild.rs/config/server/compress) documentation.
+For more details, please refer to the [Rsbuild - server.compress](https://v2.rsbuild.dev/config/server/compress) documentation.
 
 ### headers
 
@@ -49,7 +49,7 @@ export default {
 };
 ```
 
-For more details, please refer to the [Rsbuild - server.headers](https://rsbuild.rs/config/server/headers) documentation.
+For more details, please refer to the [Rsbuild - server.headers](https://v2.rsbuild.dev/config/server/headers) documentation.
 
 ### historyApiFallback
 
@@ -68,7 +68,7 @@ export default {
 };
 ```
 
-For more configuration options, please refer to the [Rsbuild - server.historyApiFallback](https://rsbuild.rs/config/server/history-api-fallback) documentation.
+For more configuration options, please refer to the [Rsbuild - server.historyApiFallback](https://v2.rsbuild.dev/config/server/history-api-fallback) documentation.
 
 ### watch
 
@@ -77,7 +77,7 @@ For more configuration options, please refer to the [Rsbuild - server.historyApi
 
 Whether to watch files change in directories such as `mock/`, `server/`, `api/`.
 
-For more details, please refer to the [Rsbuild - dev.watchFiles](https://rsbuild.rs/config/dev/watch-files) documentation.
+For more details, please refer to the [Rsbuild - dev.watchFiles](https://v2.rsbuild.dev/config/dev/watch-files) documentation.
 
 ### cors
 
@@ -100,7 +100,7 @@ const defaultOptions = {
 };
 ```
 
-For more configuration options and detailed usage, please refer to the [Rsbuild - server.cors](https://rsbuild.rs/config/server/cors) documentation.
+For more configuration options and detailed usage, please refer to the [Rsbuild - server.cors](https://v2.rsbuild.dev/config/server/cors) documentation.
 
 ### proxy
 
@@ -116,7 +116,7 @@ export default {
       proxy: {
         // http://localhost:8080/api -> https://example.com/api
         // http://localhost:8080/api/foo -> https://example.com/api/foo
-        '/api': 'https://example.com/api',
+        '/api': 'https://example.com',
       },
     },
   },
@@ -124,5 +124,5 @@ export default {
 ```
 
 :::tip
-This option is the same as Rsbuild's `server.proxy` option, see [Rsbuild - server.proxy](https://v2.rsbuild.rs/config/server/proxy) for detailed usage.
+This option is the same as Rsbuild's `server.proxy` option, see [Rsbuild - server.proxy](https://v2.rsbuild.dev/config/server/proxy) for detailed usage.
 :::

package/docs/en/configure/app/resolve/alias-strategy.mdx

@@ -7,7 +7,7 @@ title: aliasStrategy
 - **Type:** `'prefer-tsconfig' | 'prefer-alias'`
 - **Default:** `'prefer-tsconfig'`
 
-Set the strategy for path alias resolution, to control the priority relationship between the paths option in `tsconfig.json` and the [resolve.alias](https://rsbuild.rs/config/resolve/alias) option of Rsbuild.
+Set the strategy for path alias resolution, to control the priority relationship between the paths option in `tsconfig.json` and the [resolve.alias](https://v2.rsbuild.dev/config/resolve/alias) option of Rsbuild.
 
 import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 

package/docs/en/configure/app/resolve/dedupe.mdx

@@ -6,7 +6,7 @@ title: dedupe
 
 - **Type:** `string[]`
 
-Force Rsbuild to resolve the specified packages from project root, which is useful for deduplicating packages and reducing the bundle size. same as the [resolve.dedupe](https://rsbuild.rs/config/resolve/dedupe) config of Rsbuild.
+Force Rsbuild to resolve the specified packages from project root, which is useful for deduplicating packages and reducing the bundle size. same as the [resolve.dedupe](https://v2.rsbuild.dev/config/resolve/dedupe) config of Rsbuild.
 
 import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 

package/docs/en/configure/app/security/sri.mdx

@@ -18,7 +18,7 @@ type SriOptions = {
 Adding an `integrity` attribute to `<script>` and `<link rel="stylesheet">` tags introduced by HTML allows the browser to verify the integrity of the introduced resource, thus preventing tampering with the downloaded resource.
 
 :::info
-For a specific introduction to SRI, you can refer to [Rsbuild security.sri](https://rsbuild.rs/zh/config/security/sri).
+For a specific introduction to SRI, you can refer to [Rsbuild security.sri](https://v2.rsbuild.dev/zh/config/security/sri).
 
 This configuration type is not completely consistent with Rsbuild and will be automatically converted during the build process.
 :::

package/docs/en/configure/app/server/rsc.mdx

@@ -21,8 +21,8 @@ export default defineConfig({
 
 :::tip Prerequisites
 Before enabling RSC, ensure:
-1. React and React DOM are upgraded to version 19 (recommended 19.2.3 or above)
-2. Install the `react-server-dom-webpack` dependency
+1. React and React DOM are upgraded to version 19 (recommended 19.2.4 or above)
+2. Install the `react-server-dom-rspack@0.0.1-beta.0` dependency
 
 :::
 

package/docs/en/configure/app/source/decorators.mdx

@@ -23,7 +23,7 @@ const defaultDecorators = {
 Used to configure the decorators syntax.
 
 :::warning
-The usage of this configuration item is exactly the same as that of Rsbuild, but the default value is different. For detailed information, please refer to [Rsbuild - source.decorators](https://rsbuild.rs/config/source/decorators).
+The usage of this configuration item is exactly the same as that of Rsbuild, but the default value is different. For detailed information, please refer to [Rsbuild - source.decorators](https://v2.rsbuild.dev/config/source/decorators).
 :::
 
 We found that most projects still use the `legacy` version of the decorator syntax, so the default value is `legacy`.

package/docs/en/configure/app/tools/bundler-chain.mdx

@@ -27,4 +27,4 @@ Configurations modified via bundler chain will work on Rspack builds.
 
 > `tools.bundlerChain` is executed earlier than tools.rspack and thus will be overridden by changes in tools.rspack.
 
-For more information, please refer to [Rsbuild#tools.bundlerChain](https://rsbuild.rs/config/tools/bundler-chain).
+For more information, please refer to [Rsbuild#tools.bundlerChain](https://v2.rsbuild.dev/config/tools/bundler-chain).

package/docs/en/configure/app/tools/dev-server.mdx

@@ -102,7 +102,7 @@ export default {
       proxy: {
         // http://localhost:8080/api -> https://example.com/api
         // http://localhost:8080/api/foo -> https://example.com/api/foo
-        '/api': 'https://example.com/api',
+        '/api': 'https://example.com',
       },
     },
   },

package/docs/en/configure/app/tools/swc.mdx

@@ -35,7 +35,7 @@ export default defineConfig({
 });
 ```
 
-For more usage, please refer to [Rsbuild - tools.swc](https://rsbuild.rs/config/tools/swc).
+For more usage, please refer to [Rsbuild - tools.swc](https://v2.rsbuild.dev/config/tools/swc).
 
 ### Register SWC Plugin
 
@@ -66,4 +66,4 @@ This means that you must to choose an SWC plugin that matches the current versio
 
 If you encounter the above issues, a common solution is to upgrade both the Modern.js and SWC plugins to the latest versions.
 
-For details, please refer to [Rsbuild - SWC Plugin Version](https://rsbuild.rs/guide/basic/configure-swc#swc-plugin-version).
+For details, please refer to [Rsbuild - SWC Plugin Version](https://v2.rsbuild.dev/guide/configuration/swc#swc-plugin-version).

package/docs/en/guides/advanced-features/compatibility.mdx

@@ -56,7 +56,7 @@ The `overrideBrowserslist` configuration has a higher priority than the `.browse
 In most scenarios, it is recommended to prioritize using the `.browserslistrc` file rather than the `overrideBrowserslist` configuration because the `.browserslistrc` file is the officially defined configuration file, has better general applicability, and can be recognized by other libraries in the community.
 
 :::tip
-Please refer to [Rsbuild - Setting Browser Range](https://rsbuild.rs/zh/guide/advanced/browserslist) for more information.
+Please refer to [Rsbuild - Setting Browser Range](https://v2.rsbuild.dev/zh/guide/advanced/browserslist) for more information.
 :::
 
 import UpgradeBrowserslist from '@site-docs-en/components/upgrade-browserslist';

package/docs/en/guides/advanced-features/page-performance/optimize-bundle.mdx

@@ -98,4 +98,4 @@ See details in [plugin-image-compress](https://github.com/rspack-contrib/rsbuild
 
 A great chunk splitting strategy is very important to improve the loading performance of the application. It can make full use of the browser's caching mechanism to reduce the number of requests and improve the loading speed of the application.
 
-A variety of [chunk splitting strategies](https://rsbuild.rs/guide/optimization/split-chunk) are built into Modern.js, which can meet the needs of most applications. You can also customize the chunk splitting config according to your own business scenarios.
+A variety of [chunk splitting strategies](https://v2.rsbuild.dev/guide/optimization/code-splitting) are built into Modern.js, which can meet the needs of most applications. You can also customize the chunk splitting config according to your own business scenarios.

package/docs/en/guides/basic-features/css/css.mdx

@@ -12,20 +12,20 @@ Modern.js has built-in popular community CSS preprocessors, including Less and S
 
 By default, you don't need to configure Less and Sass. If you have custom loader configuration requirements, you can set them up by configuring [tools.less](/configure/app/tools/less) and [tools.sass](/configure/app/tools/sass).
 
-You can also use Stylus in Modern.js by installing the Stylus plugin provided by Rsbuild. For usage, please refer to [Stylus Plugin](https://rsbuild.rs/plugins/list/plugin-stylus).
+You can also use Stylus in Modern.js by installing the Stylus plugin provided by Rsbuild. For usage, please refer to [Stylus Plugin](https://v2.rsbuild.dev/plugins/list/plugin-stylus).
 
 ## Using PostCSS
 
 Modern.js has built-in [PostCSS](https://postcss.org/) to transform CSS code.
 
-Please refer to [Rsbuild - Using PostCSS](https://rsbuild.rs/guide/styling/css-usage) for detailed usage.
+Please refer to [Rsbuild - Using PostCSS](https://v2.rsbuild.dev/guide/styling/css-usage) for detailed usage.
 
 ## Using Lightning CSS
 
 Modern.js supports using [Lightning CSS](https://lightningcss.dev/) to convert CSS code. This feature can be turned on by configuring [tools.lightningcssLoader](/configure/app/tools/lightningcss-loader).
 
-Please refer to [Rsbuild - Using Lightning CSS](https://rsbuild.rs/guide/styling/css-usage#lightning-css) for detailed usage.
+Please refer to [Rsbuild - Using Lightning CSS](https://v2.rsbuild.dev/guide/styling/css-usage#lightning-css) for detailed usage.
 
 ## Using Uno CSS
 
-Please read the [Rsbuild - Using UnoCSS](https://rsbuild.rs/guide/styling/unocss) for detailed usage.
+Please read the [Rsbuild - Using UnoCSS](https://v2.rsbuild.dev/guide/styling/unocss) for detailed usage.

package/docs/en/guides/basic-features/css/tailwindcss.mdx

@@ -6,8 +6,8 @@
 
 To use [Tailwind CSS](https://tailwindcss.com/) in Modern.js, you only need to configure it according to the Rsbuild steps. Rsbuild supports Tailwind CSS versions v3 and v4:
 
-- [Tailwind CSS v3](https://rsbuild.rs/guide/styling/tailwindcss-v3#tailwind-css-v3)
-- [Tailwind CSS v4](https://rsbuild.rs/guide/styling/tailwindcss)
+- [Tailwind CSS v3](https://v2.rsbuild.dev/guide/styling/tailwindcss-v3#tailwind-css-v3)
+- [Tailwind CSS v4](https://v2.rsbuild.dev/guide/styling/tailwindcss)
 
 ## Tailwind CSS Autocomplete
 

package/docs/en/guides/basic-features/debug/proxy.mdx

@@ -17,7 +17,7 @@ export default defineConfig({
       proxy: {
         // http://localhost:8080/api -> https://example.com/api
         // http://localhost:8080/api/foo -> https://example.com/api/foo
-        '/api': 'https://example.com/api',
+        '/api': 'https://example.com',
       },
     },
   },

package/docs/en/guides/basic-features/render/rsc.mdx

@@ -21,12 +21,12 @@ Before starting, we recommend reading React's official [Server Components docume
 
 ## Quick Start
 
-1. **Ensure React and React DOM are upgraded to version 19** (recommended version 19.2.3 or above)
+1. **Ensure React and React DOM are upgraded to version 19** (recommended version 19.2.4 or above)
 
-2. **Install the `react-server-dom-webpack` dependency**
+2. **Install the `react-server-dom-rspack@0.0.1-beta.0` dependency**
 
 ```bash
-npm install react-server-dom-webpack
+npm install react-server-dom-rspack@0.0.1-beta.0
 ```
 
 :::warning Notes
@@ -49,8 +49,8 @@ export default defineConfig({
 ```
 
 :::info Migrating from Legacy CSR Projects
-If you have a CSR project that uses Modern.js data loaders, after enabling RSC, data loaders will execute on the server by default.
-To maintain consistency with the original behavior, you need to change all `.data.ts` files to `.data.client.ts` first.
+If you have a CSR project that uses Modern.js Data Loaders, after enabling RSC, Data Loaders will execute on the server by default.
+For detailed migration guide, please refer to [CSR Project Migration to RSC](#csr-project-migration-guide).
 
 :::
 
@@ -233,11 +233,140 @@ Each level of route components (such as `layout.tsx`, `page.tsx`) can independen
 
 For example, if `layout.tsx` is a Client Component (requiring client-side interactivity), you can still set `page.tsx` as a Server Component (for data fetching and rendering). This approach provides great flexibility and allows non-RSC projects to gradually migrate to RSC projects.
 
-## Notes
+## Server Component and Data Loader
+
+In RSC projects, you have two ways to fetch data: directly in Server Components, or using [Data Loader](/guides/basic-features/data/data-fetch). Both approaches have their advantages, and you can choose flexibly based on your scenario.
+
+### Comparison of Two Data Fetching Approaches
+
+| Feature | Fetching in Server Component | Fetching in Data Loader |
+| --- | --- | --- |
+| Avoid Request Waterfall | Requires manual optimization | ✅ Automatically parallel execution |
+| Component Cohesion | ✅ Data and UI in the same place | Data logic separated into separate files |
+| Maintainability | ✅ Easier to understand and maintain | Requires maintaining additional files |
+| Type Safety | ✅ Natural type inference | Requires manual type management |
+
+**Generally, we recommend fetching data in Server Components**, because waterfall requests have less performance impact on the server, and this approach makes components more cohesive, with data fetching logic and UI rendering in the same place, making it easier to understand and maintain. However, if your page has multiple independent data sources and you want to completely avoid request waterfall issues, Data Loader's parallel execution feature will be more advantageous.
+
+### Data Loader Execution Environment in RSC Projects
+
+In RSC projects, the execution environment of Data Loaders is related to file naming:
+
+- **`*.data.ts`**: Executes only on the **server**, and data can be consumed by both Client Components and Server Components
+- **`*.data.client.ts`**: Executes only on the **client**
+
+```bash
+.
+└── routes
+    └── user
+        ├── page.tsx           # Route component (can be Server or Client Component)
+        ├── page.data.ts       # Executes on server, data can be consumed by any component
+        └── page.data.client.ts # Executes on client
+```
+
+In Modern.js RSC projects, Server Components can receive data returned by Data Loaders through the `loaderData` prop:
+
+```tsx title="routes/user/page.tsx"
+// Server Component receives loaderData through props
+export default function UserPage({ loaderData }: { loaderData: { name: string } }) {
+  return <div>Welcome, {loaderData.name}</div>;
+}
+```
+
+```tsx title="routes/user/page.tsx"
+'use client';
+// Client Component can also receive loaderData through props
+export default function UserPage({ loaderData }: { loaderData: { name: string } }) {
+  return <div>Welcome, {loaderData.name}</div>;
+}
+```
+
+### Data Loader Returning Server Component
+
+In Modern.js RSC projects, Data Loaders have a powerful feature: **they can return Server Components**. This is very helpful for gradual migration, allowing you to render server-generated content in Client Components.
+
+```tsx title="routes/user/layout.data.tsx"
+// Server Component defined in data loader file
+function UserProfile() {
+  return <div>User Profile (Server Rendered)</div>;
+}
+
+export const loader = async () => {
+  const userData = await fetchUserData();
+
+  return {
+    user: userData,
+    // Return a Server Component as part of the data
+    ProfileComponent: <UserProfile />,
+  };
+};
+```
+
+```tsx title="routes/user/layout.tsx"
+'use client';
+import { Outlet } from '@modern-js/runtime/router';
+
+export default function UserLayout({
+  loaderData,
+}: {
+  loaderData: { user: any; ProfileComponent: React.ReactNode };
+}) {
+  const { user, ProfileComponent } = loaderData;
+
+  return (
+    <div>
+      {/* Directly render Server Component in Client Component */}
+      {ProfileComponent}
+      <div>User: {user.name}</div>
+      <Outlet />
+    </div>
+  );
+}
+```
+
+## CSR Project Migration Guide
+
+Modern.js's RSC capability supports both SSR and CSR projects. For existing CSR projects, if you want to gradually migrate to RSC, we recommend following these steps:
+
+1. **Enable RSC Configuration**
+
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  server: {
+    rsc: true,
+  },
+});
+```
+
+2. **Mark All Route Components with `'use client'`**
+
+This ensures that existing components maintain their behavior and continue to run as Client Components.
+
+```tsx title="routes/page.tsx"
+'use client';
+
+export default function Page() {
+  // Existing client-side logic remains unchanged
+}
+```
+
+3. **Rename All `*.data.ts` to `*.data.client.ts`**
+
+Since `*.data.ts` in RSC projects executes on the server by default, to maintain consistency with CSR project behavior (Data Loaders execute on the client), you need to rename the files.
+
+```bash
+# Before renaming
+routes/user/page.data.ts
+
+# After renaming
+routes/user/page.data.client.ts
+```
 
-### Legacy CSR Projects
+After completing these steps, you can gradually migrate components to Server Components and enjoy the performance benefits of RSC.
 
-If you have a CSR project that uses Modern.js data loaders, after enabling RSC, data loaders will execute on the server by default, which means you need to change all `.data.ts` files to `.data.client.ts` first to maintain consistency with the previous behavior.
+## Notes
 
 ### Projects Using Streaming SSR
 

package/docs/en/guides/concept/builder.mdx

@@ -4,7 +4,7 @@ sidebar_position: 2
 
 # Build Engine
 
-Modern.js internally encapsulates [Rsbuild](https://rsbuild.rs/), using Rspack as the bundler.
+Modern.js internally encapsulates [Rsbuild](https://v2.rsbuild.dev/), using Rspack as the bundler.
 
 ::: tip What is Rsbuild?
 Rsbuild is a build tool based on Rspack. It is an enhanced Rspack CLI, easy-to-use, and ready-to-use out of the box.
@@ -40,7 +40,7 @@ flowchart TD
 
 ## Build Documentation
 
-The documentation address of Rsbuild is: https://rsbuild.rs/
+The documentation address of Rsbuild is: https://v2.rsbuild.dev/
 
 In this documentation, you can learn about the detailed introduction of Rsbuild, and you can also find complete usage guides for various building capabilities.
 
@@ -57,4 +57,4 @@ In Modern.js, you can register Rspack plugins or Rsbuild plugins:
 
 Rsbuild provides rich build capabilities, including JavaScript compilation, CSS compilation, static assets processing, code hot update, code compression, TS type checking, and dozens of other capabilities.
 
-We recommend that you read [「Rsbuild - All Features」](https://rsbuild.rs/guide/start/features) to learn about all the features provided by Rsbuild.
+We recommend that you read [「Rsbuild - All Features」](https://v2.rsbuild.dev/guide/start/features) to learn about all the features provided by Rsbuild.

package/docs/en/guides/get-started/tech-stack.mdx

@@ -12,7 +12,7 @@ In this document, you can learn about the main technology stack involved in the
 
 Modern.js uses [React 18](https://react.dev/) to build user interfaces and is also compatible with React 17.
 
-Rsbuild supports building Vue applications. If you need to use Vue, you can refer to ["Rsbuild - Vue"](https://rsbuild.rs/guide/framework/vue).
+Rsbuild supports building Vue applications. If you need to use Vue, you can refer to ["Rsbuild - Vue"](https://v2.rsbuild.dev/guide/framework/vue).
 
 ## Routing
 
@@ -34,7 +34,7 @@ Modern.js uses [Rspack](https://rspack.rs/) to bundle your web applications.
 
 Modern.js uses [SWC](https://swc.rs/) as JavaScript transpiler to transform TypeScript or JSX into JavaScript code that can run in browsers and perform syntax downgrades.
 
-When using Rspack for building, `babel-loader` is not enabled by default. If you need to add [Babel](https://babeljs.io/) plugins, you can configure them through [`babel plugin`](https://rsbuild.rs/plugins/list/plugin-babel#babel-plugin), which will generate additional compilation overhead and slow down Rspack build speed to some extent.
+When using Rspack for building, `babel-loader` is not enabled by default. If you need to add [Babel](https://babeljs.io/) plugins, you can configure them through [`babel plugin`](https://v2.rsbuild.dev/plugins/list/plugin-babel#babel-plugin), which will generate additional compilation overhead and slow down Rspack build speed to some extent.
 
 ## Minimizer
 
@@ -53,7 +53,7 @@ Modern.js supports enabling ["Tailwind CSS"](/guides/basic-features/css/tailwind
 Modern.js supports three CSS preprocessors: [Sass](https://sass-lang.com/), [Less](https://lesscss.org/), and [Stylus](https://stylus-lang.com/):
 
 - Sass and Less are supported by default and ready to use.
-- Stylus is optional and can be used by referring to the ["Stylus Plugin"](https://rsbuild.rs/plugins/list/plugin-stylus).
+- Stylus is optional and can be used by referring to the ["Stylus Plugin"](https://v2.rsbuild.dev/plugins/list/plugin-stylus).
 
 ## CSS Modules
 

package/docs/en/guides/topic-detail/module-federation/application.mdx

@@ -18,7 +18,7 @@ The filename can be arbitrary; Modern.js does not enforce a specific naming conv
 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/react-v19';
+import { createBridgeComponent } from '@module-federation/modern-js-v3/react-v19';
 
 const ModernRoot = createRoot();
 export const provider = createBridgeComponent({
@@ -32,8 +32,8 @@ 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/react-v19`
-- **React 18**: Use `@module-federation/modern-js/react-v18`
+- **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.
 :::
@@ -43,7 +43,7 @@ This file will pass the root component of the `main` entry application to the Br
 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';
+import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 
 export default createModuleFederationConfig({
   name: 'remote',
@@ -76,8 +76,8 @@ If you are not familiar with the capabilities of `$.tsx`, please read [Wildcard
 :::
 
 ```tsx title="src/routes/remote/$.tsx"
-import { createRemoteAppComponent } from '@module-federation/modern-js/react';
-import { loadRemote } from '@module-federation/modern-js/runtime';
+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 (

package/docs/en/guides/topic-detail/module-federation/deploy.mdx

@@ -14,7 +14,7 @@ For the consumer of Module Federation, its connection with the producer is the r
 For example, if the producer is deployed under the domain `https://my-remote-module`, the developer needs to modify the consumer's configuration file:
 
 ```ts title="module-federation.config.ts"
-import { createModuleFederationConfig } from '@module-federation/modern-js';
+import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 
 export default createModuleFederationConfig({
   name: 'host',
@@ -76,7 +76,7 @@ This configuration will also affect the access path of the producer's `mf-manife
 At this point, the consumer needs to configure the following address when configuring the remote module:
 
 ```ts title="module-federation.config.ts"
-import { createModuleFederationConfig } from '@module-federation/modern-js';
+import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 
 export default createModuleFederationConfig({
   name: 'host',

package/docs/en/guides/topic-detail/module-federation/i18n.mdx

@@ -38,7 +38,7 @@ Both producers and consumers need to enable i18n capability first.
 In Module Federation scenarios, you need to install both the i18n plugin and the Module Federation plugin:
 
 ```bash
-pnpm add i18next react-i18next @modern-js/plugin-i18n @module-federation/modern-js
+pnpm add i18next react-i18next @modern-js/plugin-i18n @module-federation/modern-js-v3
 ```
 
 :::info
@@ -54,7 +54,7 @@ Configure both the i18n plugin and the Module Federation plugin in `modern.confi
 ```ts title="modern.config.ts"
 import { appTools, defineConfig } from '@modern-js/app-tools';
 import { i18nPlugin } from '@modern-js/plugin-i18n';
-import { moduleFederationPlugin } from '@module-federation/modern-js';
+import { moduleFederationPlugin } from '@module-federation/modern-js-v3';
 
 export default defineConfig({
   plugins: [appTools(), i18nPlugin(), moduleFederationPlugin()],
@@ -84,7 +84,7 @@ Both producers and consumers need to configure `shared` in `module-federation.co
 #### Configure Module Federation
 
 ```ts title="module-federation.config.ts"
-import { createModuleFederationConfig } from '@module-federation/modern-js';
+import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 
 export default createModuleFederationConfig({
   // The name parameter must be unique and cannot be the same as other applications (including different remotes)
@@ -203,7 +203,7 @@ When using an independent I18n instance, the producer maintains its own language
 #### Configure Module Federation
 
 ```ts title="module-federation.config.ts"
-import { createModuleFederationConfig } from '@module-federation/modern-js';
+import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 
 export default createModuleFederationConfig({
   // The name parameter must be unique and cannot be the same as other applications (including different remotes)
@@ -229,7 +229,7 @@ When consumers need to load remote components, they need to configure accordingl
 First, configure the remote module in the consumer's `module-federation.config.ts`:
 
 ```ts title="module-federation.config.ts"
-import { createModuleFederationConfig } from '@module-federation/modern-js';
+import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 
 export default createModuleFederationConfig({
   // The name parameter must be unique and cannot be the same as other applications (including different remotes)
@@ -258,8 +258,8 @@ If the producer uses a shared I18n instance, the consumer must configure `shared
 When the producer uses a shared I18n instance, the consumer can directly load the remote component without additional configuration:
 
 ```tsx title="src/routes/page.tsx"
-import { createLazyComponent } from '@module-federation/modern-js/react';
-import { getInstance } from '@module-federation/modern-js/runtime';
+import { createLazyComponent } from '@module-federation/modern-js-v3/react';
+import { getInstance } from '@module-federation/modern-js-v3/runtime';
 
 const RemoteComponent = createLazyComponent({
   instance: getInstance(),
@@ -352,7 +352,7 @@ First, you need to create an entry file to export the application:
 import '@modern-js/runtime/registry/index';
 import { render } from '@modern-js/runtime/browser';
 import { createRoot } from '@modern-js/runtime/react';
-import { createBridgeComponent } from '@module-federation/modern-js/react-v19';
+import { createBridgeComponent } from '@module-federation/modern-js-v3/react-v19';
 import type { ReactElement } from 'react';
 
 const ModernRoot = createRoot();
@@ -371,7 +371,7 @@ export default provider;
 #### Configure Module Federation
 
 ```ts title="module-federation.config.ts"
-import { createModuleFederationConfig } from '@module-federation/modern-js';
+import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 
 export default createModuleFederationConfig({
   // The name parameter must be unique and cannot be the same as other applications (including different remotes)
@@ -472,7 +472,7 @@ When consumers need to load remote applications, they need to use the Bridge API
 First, configure the remote application in the consumer's `module-federation.config.ts`:
 
 ```ts title="module-federation.config.ts"
-import { createModuleFederationConfig } from '@module-federation/modern-js';
+import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 
 export default createModuleFederationConfig({
   // The name parameter must be unique and cannot be the same as other applications (including different remotes)
@@ -500,8 +500,8 @@ If the producer uses a shared I18n instance, the consumer must configure `shared
 Create a component for loading the remote application:
 
 ```tsx title="src/components/RemoteApp.tsx"
-import { createRemoteAppComponent } from '@module-federation/modern-js/react';
-import { loadRemote } from '@module-federation/modern-js/runtime';
+import { createRemoteAppComponent } from '@module-federation/modern-js-v3/react';
+import { loadRemote } from '@module-federation/modern-js-v3/runtime';
 import React from 'react';
 
 const FallbackErrorComp = (info: any) => {

package/docs/en/guides/topic-detail/module-federation/introduce.mdx

@@ -18,7 +18,7 @@ Refer to [Module Federation 2.0 Announcement](https://module-federation.io/zh/bl
 
 ## Modern.js MF Plugin
 
-Based on internal practices at ByteDance, the Module Federation team officially provides the [Modern.js Plugin](https://www.npmjs.com/package/@module-federation/modern-js) to help developers use Module Federation more easily.
+Based on internal practices at ByteDance, the Module Federation team officially provides the [Modern.js Plugin](https://www.npmjs.com/package/@module-federation/modern-js-v3) to help developers use Module Federation more easily.
 
 The plugin injects the Module Federation plugin into Modern.js applications and automatically handles build configurations and adds runtime code.
 

package/docs/en/guides/topic-detail/module-federation/ssr.mdx

@@ -1,6 +1,6 @@
 # Server-Side Rendering
 
-`@module-federation/modern-js` offers powerful capabilities, enabling developers to easily combine Module Federation with server-side rendering (SSR) in Modern.js applications.
+`@module-federation/modern-js-v3` offers powerful capabilities, enabling developers to easily combine Module Federation with server-side rendering (SSR) in Modern.js applications.
 
 ## Enable SSR
 
@@ -35,7 +35,7 @@ Module Federation now supports [data fetching](https://module-federation.io/zh/g
 In Modern.js, data fetching can be used with SSR. Using the example in the previous chapter, create a data fetching file:
 
 ```ts title="src/components/Button.data.ts"
-import type { DataFetchParams } from '@module-federation/modern-js/react';
+import type { DataFetchParams } from '@module-federation/modern-js-v3/react';
 
 export type Data = {
   data: string;
@@ -74,11 +74,11 @@ Consumers must use [`createLazyComponent`](https://module-federation.io/practice
 
 ```tsx title="src/routes/page.tsx"
 import type { JSX } from 'react';
-import { getInstance } from '@module-federation/modern-js/runtime';
+import { getInstance } from '@module-federation/modern-js-v3/runtime';
 import {
   ERROR_TYPE,
   lazyLoadComponentPlugin,
-} from '@module-federation/modern-js/react';
+} from '@module-federation/modern-js-v3/react';
 
 const instance = getInstance();
 instance!.registerPlugins([lazyLoadComponentPlugin()]);