@modern-js/main-doc 2.69.7 → 3.0.0-alpha.1

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

@@ -21,7 +21,7 @@ export default defineConfig({
 For better performance, we only support using this capability combination in Streaming SSR scenarios.
 
 :::warning
-Currently, `@module-federation/bridge-react` is not compatible with the Node environment. You must remove it from the dependencies to use Module Federation and server-side rendering correctly. This means Bridge cannot work with server-side rendering.
+Application-level modules (modules using `createBridgeComponent` and `createRemoteAppComponent`) do not support server-side rendering (SSR). If you need to use SSR functionality, please use component-level module export methods instead.
 :::
 
 ## Data Fetching
@@ -56,7 +56,6 @@ In Button, we get the data from the `Props`:
 
 ```ts title="src/components/Button.tsx"
 import React from 'react';
-import './index.css';
 import type { Data } from './Button.data';
 
 export const Button = (props: { mfData: Data }) => {
@@ -68,3 +67,52 @@ export const Button = (props: { mfData: Data }) => {
   );
 };
 ```
+
+## Consuming Components
+
+Consumers must use [`createLazyComponent`](https://module-federation.io/practice/bridge/react-bridge/load-component.html#what-is-createlazycomponent) to load remote components and specify the export as the component name.
+
+```tsx title="src/routes/page.tsx"
+import type { JSX } from 'react';
+import { getInstance } from '@module-federation/modern-js/runtime';
+import {
+  ERROR_TYPE,
+  lazyLoadComponentPlugin,
+} from '@module-federation/modern-js/react';
+
+const instance = getInstance();
+instance!.registerPlugins([lazyLoadComponentPlugin()]);
+
+const Button = instance!.createLazyComponent({
+  loader: () => {
+    return import('remote/Button');
+  },
+  loading: 'loading...',
+  export: 'Button', // Configure this as the export name of the remote component
+  fallback: ({ error, errorType, dataFetchMapKey }) => {
+    console.error(error);
+    if (errorType === ERROR_TYPE.LOAD_REMOTE) {
+      return <div>load remote failed</div>;
+    }
+    if (errorType === ERROR_TYPE.DATA_FETCH) {
+      return (
+        <div>
+          data fetch failed, the dataFetchMapKey key is: {dataFetchMapKey}
+        </div>
+      );
+    }
+    return <div>error type is unknown</div>;
+  },
+});
+
+const Index = (): JSX.Element => {
+  return (
+    <div>
+      <h1>Basic usage with data fetch</h1>
+      <Button />
+    </div>
+  );
+};
+
+export default Index;
+```

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

@@ -21,15 +21,7 @@ import { appTools, defineConfig } from '@modern-js/app-tools';
 import { moduleFederationPlugin } from '@module-federation/modern-js';
 
 export default defineConfig({
-  runtime: {
-    router: true,
-  },
-  plugins: [
-    appTools({
-      bundler: 'rspack',
-    }),
-    moduleFederationPlugin(),
-  ],
+  plugins: [appTools(), moduleFederationPlugin()],
 });
 ```
 
@@ -79,18 +71,10 @@ import { appTools, defineConfig } from '@modern-js/app-tools';
 import { moduleFederationPlugin } from '@module-federation/modern-js';
 
 export default defineConfig({
-  dev: {
+  server: {
     port: 3051,
   },
-  runtime: {
-    router: true,
-  },
-  plugins: [
-    appTools({
-      bundler: 'rspack',
-    }),
-    moduleFederationPlugin(),
-  ],
+  plugins: [appTools(), moduleFederationPlugin()],
 });
 ```
 
@@ -120,7 +104,7 @@ export default createModuleFederationConfig({
 Create a new route file `src/routes/remote/page.tsx` and import the producer module:
 
 ```tsx title="src/routes/remote/page.tsx"
-import React, { useState, Suspense } from 'react';
+import React, { Suspense, type JSX } from 'react';
 import { Button } from 'remote/Button';
 
 const Index = (): JSX.Element => {
@@ -195,25 +179,21 @@ export default defineConfig({
   server: {
     port: 3051,
   },
-  runtime: {
-    router: true,
-  },
   output: {
     // Now this configuration is only used in the local when you run modern serve command.
     // If you want to deploy the application to the platform, use your own domain name.
     // Module federation will automatically write it to mf-manifest.json, which influences consumer to fetch remoteEntry.js.
     assetPrefix: 'http://127.0.0.1:3051',
   },
-  plugins: [
-    appTools({
-      bundler: 'rspack',
-    }),
-    moduleFederationPlugin(),
-  ],
+  plugins: [appTools(), moduleFederationPlugin()],
 });
 ```
 
-Now, in the producer, run `modern build && modern serve`, and in the consumer, run `modern build && modern serve` to simulate the production environment locally and access the remote modules.
+Now, in the producer, run `modern build && MODERN_MF_AUTO_CORS=true  modern serve`, and in the consumer, run `modern build && modern serve` to simulate the production environment locally and access the remote modules.
+
+:::tip
+When using the `modern serve` command, you need to set the `MODERN_MF_AUTO_CORS=true` environment variable when starting the producer project to automatically handle CORS issues and ensure that consumers can properly access the producer's remote module resources.
+:::
 
 You can refer to this example: [Modern.js & Module Federation Basic Example](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/base).
 

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

@@ -18,21 +18,9 @@ Modern.js is internally based on [Rsbuild](https://rsbuild.rs/) and encapsulates
 
 ---
 
-### How to clear the webpack cache?
+### How to view the final generated Rspack configuration?
 
-By default, Modern.js's webpack cache is generated in the `./node_modules/.cache/webpack` directory.
-
-If you need to clear the local webpack cache, you can execute the following command:
-
-```bash
-rm -rf ./node_modules/.cache
-```
-
----
-
-### How to view the final generated webpack / Rspack configuration?
-
-Modern.js provides [inspect command](https://modernjs.dev/en/apis/app/commands.html) to view the final Modern.js configuration and webpack / Rspack configuration generated by the project.
+Modern.js provides [inspect command](https://modernjs.dev/en/apis/app/commands.html) to view the final Modern.js configuration and Rspack configuration generated by the project.
 
 ```bash
 ➜ npx modern inspect
@@ -45,32 +33,6 @@ Inspect config succeed, open following files to view the content:
 
 ---
 
-### 'compilation' argument error when webpack compiling?
-
-If the following error occurs when compiling, it is usually caused by installing the wrong version of webpack in the project, or installing multiple versions of webpack:
-
-```bash
-TypeError: The 'compilation' argument must be an instance of Compilation
-```
-
-The webpack version problem has the following situations:
-
-1. The webpack dependency is directly declared in the project's package.json, and the version range of the webpack that the Modern.js depends on is different and cannot match the same version.
-2. Multiple npm packages installed in the project all depend on webpack, and the webpack version ranges they depend on are different and cannot match the same version.
-3. Due to the lock mechanism of the package manager, multiple webpack versions are generated in the lock file.
-
-In the first case, it is recommended to remove the webpack dependency from the project's package.json. Because Modern.js encapsulates webpack-related capabilities by default, and will pass in the webpack object in the [tools.webpack](/en/configure/app/tools/webpack.html) configuration option. Therefore, in most cases, it is not recommended to install additional webpack dependencies in the project.
-
-In the second case, it is recommended to see if you can upgrade an npm package so that its dependent webpack version range is consistent with the Modern.js. It is also possible to manually unify versions through the ability of the package manager, e.g. using [yarn resolutions](https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/) or [pnpm overrides](https ://pnpm.io/package_json#pnpmoverrides).
-
-If it is the third case, you can use the two methods mentioned in the second case, or you can try to delete the lock file and reinstall it to solve it.
-
-:::tip
-Deleting the lock file will automatically upgrade the dependency version in the project to the latest version under the specified scope, please test it thoroughly.
-:::
-
----
-
 ### Failed import other modules in Monorepo?
 
 Due to considerations of compilation performance, by default, the Modern.js does not compile files under `node_modules` or files outside the current project directory.
@@ -124,7 +86,7 @@ For more information, please refer to issue: [babel#12731](https://github.com/ba
 
 ### The compilation progress bar is stuck, but there is no Error log in the terminal?
 
-When the compilation progress bar is stuck, but there is no Error log on the terminal, it is usually because an exception occurred during the compilation. In some cases, when Error is caught by webpack or other modules, the error log can not be output correctly. The most common scenario is that there is an exception in the Babel config, which is caught by webpack, and webpack swallows the Error in some cases.
+When the compilation progress bar is stuck, but there is no Error log on the terminal, it is usually because an exception occurred during the compilation. In some cases, when Error is caught by the build tool or other modules, the error log can not be output correctly. The most common scenario is that there is an exception in the Babel config, which is caught by the build tool, and the build tool swallows the Error in some cases.
 
 **Solution:**
 
@@ -188,47 +150,6 @@ export default {
 };
 ```
 
-In addition to the reasons mentioned above, there is another possibility that can cause Babel compilation to hang, which is when Babel compiles a large JS file exceeding 10,000 lines (usually a large file in the node_modules directory that is compiled using `source.include`).
-
-When Babel compiles large files, the built-in babel-plugin-styled-components in Modern.js can cause the compilation to hang. There is already a [relevant issue](https://github.com/styled-components/babel-plugin-styled-components/issues/374) in the community .
-
-In the future, Modern.js will consider removing the built-in babel-plugin-styled-components. In the current version, you can set [tools.styledComponents](/configure/app/tools/styled-components.html) to `false` to remove this plugin.
-
-```ts title="modern.config.ts"
-export default {
-  tools: {
-    styledComponents: false,
-  },
-};
-```
-
----
-
-### The webpack cache does not work?
-
-Modern.js enables webpack's persistent cache by default.
-
-After the first compilation is completed, the cache file will be automatically generated and output to the `./node_modules/.cache/webpack` directory. When the second compilation is performed, the cache is hit and the compilation speed is greatly improved.
-
-When configuration files such as `package.json` are modified, the cache is automatically invalidated.
-
-If the webpack compilation cache in the project has not taken effect, you can add the following configuration for troubleshooting:
-
-```ts
-export default {
-  tools: {
-    webpack(config) {
-      config.infrastructureLogging = {
-        ...config.infrastructureLogging,
-        debug: /webpack\.cache/,
-      };
-    },
-  },
-};
-```
-
-After adding the above configuration, webpack will output logs for debugging. Please refer to the logs related to `PackFileCacheStrategy` to understand the cause of cache invalidation.
-
 ---
 
 ### Compilation error after referencing a type from lodash

package/docs/en/guides/troubleshooting/cli.mdx

@@ -6,11 +6,9 @@ sidebar_position: 2
 
 ### Unable to pass command line arguments correctly when using pnpm?
 
-There are some differences between pnpm v6 and pnpm v7 in how they execute commands, and the following should be noted:
+When using pnpm to call the commands in `package.json`, you need to pay attention to how parameters are passed:
 
-pnpm v7:
-
-When using pnpm to call the commands in `package.json`, if you need to pass parameters to pnpm, you need to put the parameters before the command.
+- **If you need to pass parameters to pnpm**, you need to put the parameters before the command.
 
 For example, using the pnpm `--filter` parameter to run the prepare command:
 
@@ -18,7 +16,7 @@ For example, using the pnpm `--filter` parameter to run the prepare command:
 pnpm run --filter "./packages/**" prepare
 ```
 
-If you need to pass parameters to the command, you need to put the parameters after the command.
+- **If you need to pass parameters to the command**, you need to put the parameters after the command.
 
 For example, in the following `package.json` configuration:
 
@@ -36,28 +34,6 @@ The way to pass parameters when running the command is:
 pnpm run command --options
 ```
 
-pnpm v6:
-
-In the following `package.json` configuration:
-
-```json
-{
-  "scripts": {
-    "command": "modern command"
-  }
-}
-```
-
-If you need to run `modern command --option`:
-
-When using pnpm, you need to run `pnpm run command -- --option`.
-
-This is because pnpm's handling of command parameters is different from that of Yarn, but similar to that of npm: when the `--` string is not added, the parameters passed are for pnpm; when the `--` string is used, the parameters passed are for running the script.
-
-In the above example, the `--option` parameter is passed to `modern command`. If you run `pnpm run command --option`, the `--option` parameter will be passed to pnpm.
-
-In summary:
-
-**When using pnpm v7, if passing parameters to pnpm, the parameters need to be placed before the command.**
-
-**When using pnpm v6, if the parameters are passed to pnpm, `--` is not required; if the parameters are passed to the script, the `--` string needs to be added.**
+:::tip
+Modern.js requires Node.js >= 20.19.5, and pnpm v6 does not support Node.js 20, so please use pnpm v7 or higher.
+:::

package/docs/en/guides/troubleshooting/dependencies.mdx

@@ -14,24 +14,24 @@ Here are some basic examples. For detailed usage, please refer to the documentat
 
 For projects using npm or yarn, you can use the `npm ls` command.
 
-For example, running `npm ls @modern-js/core` will show the following result:
+For example, running `npm ls @modern-js/plugin` will show the following result:
 
 ```
 project
 └─┬ @modern-js/app-tools@x.y.z
-  └── @modern-js/core@x.y.z
+  └── @modern-js/plugin@x.y.z
 ```
 
 **pnpm**
 
 For projects using pnpm, you can use the `pnpm ls` command.
 
-For example, running `pnpm ls @modern-js/core --depth Infinity` will show the following result:
+For example, running `pnpm ls @modern-js/plugin --depth Infinity` will show the following result:
 
 ```
 devDependencies:
 @modern-js/app-tools x.y.z
-└── @modern-js/core x.y.z
+└── @modern-js/plugin x.y.z
 ```
 
 ---
@@ -43,24 +43,24 @@ If you encounter the following error message during dependency installation, it
 ```bash
 The engine "node" is incompatible with this module.
 
-Expected version ">=16.2.0". Got "12.20.1"
+Expected version ">=20.19.5". Got "16.20.1"
 ```
 
-When using Modern.js, it is recommended to use the latest version of [Node.js 18.x](https://nodejs.org/download/release/latest-v18.x/).
+Modern.js requires Node.js version >= 20.19.5. We strongly recommend using the latest LTS version (such as [Node.js 22 LTS](https://nodejs.org/)) for the best experience.
 
 If the Node.js version of the current environment is lower than the above requirement, you can use tools such as [nvm](https://github.com/nvm-sh/nvm) or [fnm](https://github.com/Schniz/fnm) to switch versions.
 
 Here is an example of using nvm:
 
-```
-# Install Node.js v14
-nvm install 14
+```bash
+# Install Node.js 22 LTS
+nvm install 22 --lts
 
-# Switch to Node 14
-nvm use 14
+# Switch to Node.js 22
+nvm use 22
 
-# Set Node 14 as the default version
-nvm default 14
+# Set Node.js 22 as the default version
+nvm alias default 22
 ```
 
 For local development environments, it is recommended to use [fnm](https://github.com/Schniz/fnm), which has better performance than nvm and has similar usage.
@@ -77,14 +77,14 @@ Type 'React.ReactNode' is not assignable to type 'import("/node_modules/@types/r
 Type '{}' is not assignable to type 'ReactNode'.
 ```
 
-The reason for this problem is that the ReactNode type definition in React 18 is different from that in React 16/17. If there are multiple different versions of `@types/react` in the project, a ReactNode type conflict will occur, resulting in the above error.
+The reason for this problem is that the ReactNode type definition in React 18+ is different from that in React 16/17. If there are multiple different versions of `@types/react` in the project, a ReactNode type conflict will occur, resulting in the above error.
 
 The solution is to lock the `@types/react` and `@types/react-dom` in the project to a unified version, such as `v17`.
 
 ```json
 {
-  "@types/react": "^17",
-  "@types/react-dom": "^17"
+  "@types/react": "^19",
+  "@types/react-dom": "^19"
 }
 ```
 
@@ -102,12 +102,10 @@ In most cases, peer dependencies warnings will not affect the project operation
 
 ### What is the minimum supported version of React for the Modern.js framework?
 
-**The recommended React version for the Modern.js framework is >= 18.0.0**, and different functions have different requirements for the React version.
+**Modern.js framework requires React version >= 18.0.0**.
 
-- If you are using React 17, some framework functions will not be available, such as Streaming SSR, because it relies on new features provided by React 18.
-- If you are still using React 16, you will not be able to use Modern.js's runtime or server-side capabilities. You can consider using the build mode of Modern.js, that is, only using Modern.js's build capabilities. In this case, React 16 can still be used.
-
-In future major versions of Modern.js, we will gradually remove support for React 16 and React 17. Therefore, please upgrade to React 18 or higher as soon as possible.
+- **If you are using Modern.js runtime capabilities** (including SSR, Streaming SSR, data loading, routing, etc.), you must use React 18 or higher. React 16 and React 17 are no longer supported.
+- **If you are only using Modern.js build capabilities** (without runtime), React 16 or React 17 may theoretically work, but it is strongly recommended to upgrade to React 18 or higher for the best experience and full feature support.
 
 ---
 
@@ -118,6 +116,8 @@ Type 'CliPlugin<{}, {}, {}, {}>' is not assignable to type 'CliPlugin<any, {}, {
   Types of property 'setup' are incompatible.
 ```
 
-When you use the Modern.js framework, the above error occurs in the configuration file, it may be due to the inconsistent versions of Modern.js related packages。You can upgrade and unify the version of modern.js related packages through `npx modern upgrade` command.
+When you use the Modern.js framework, the above error occurs in the configuration file, it may be due to the inconsistent versions of Modern.js related packages. You need to manually update all `@modern-js/**` packages to the same version.
 
 In the monorepo, the above error may also occur due to inconsistent versions of the Modern.js framework used by different sub-projects.
+
+For information on how to unify and upgrade dependency versions, please refer to the [Upgrading](/guides/get-started/upgrade) documentation.

package/docs/en/guides/upgrade/_meta.json

@@ -0,0 +1 @@
+["overview", "config", "entry", "web-server", "tailwindcss", "other"]