@modern-js/main-doc 0.0.0-next-1686120584093 → 0.0.0-next-1686150530663

package/CHANGELOG.md

@@ -1,24 +1,28 @@
 # @modern-js/main-doc
 
-## 0.0.0-next-1686120584093
+## 0.0.0-next-1686150530663
 
 ### Patch Changes
 
-- 411d047d98: docs: fix reset command
+- 411d047d9: docs: fix reset command
 
   docs: 修复 reset command 翻译问题
 
-- 2ede584c37: docs(main): update start doc
+- bce7a1274: docs(main): update concept doc
+
+  docs(main): 更新核心概念文档
+
+- 2ede584c3: docs(main): update start doc
 
   docs(main): 更新开始文档
 
-- 7267a1ae6c: docs(main): update changeset doc
+- 7267a1ae6: docs(main): update changeset doc
 
   docs(main): 更新包版本管理文档
 
-- Updated dependencies [bd4b150404]
-- Updated dependencies [2ede584c37]
-  - @modern-js/builder-doc@0.0.0-next-1686120584093
+- Updated dependencies [bd4b15040]
+- Updated dependencies [2ede584c3]
+  - @modern-js/builder-doc@0.0.0-next-1686150530663
 
 ## 2.22.0
 

package/docs/en/configure/app/output/css-modules.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: cssModules
+---
+
+# output.cssModules
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [output.cssModules](https://modernjs.dev/builder/en/api/config-output.html#outputcssmodules).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/output/cssModules.md';
+
+<Main />

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

@@ -4,31 +4,31 @@ sidebar_position: 2
 
 # Builder
 
-**Modern.js uses [Modern.js Builder](https://modernjs.dev/builder) to build your Web App.**
+**Modern.js uses [Modern.js Builder](https://modernjs.dev/builder/en) to build your Web App.**
 
-Modern.js Builder is one of the core components of Modern.js. It is A build engine for web development. and can be used independently of Modern.js. Modern.js Builder supports multiple bundlers such as webpack and Rspack, and it uses webpack by default.
+Modern.js Builder is one of the core components of the Modern.js system. It is a build engine for web development scenarios that can be used independently of Modern.js. Modern.js Builder supports multiple bundlers such as webpack and Rspack, and by default uses the most mature webpack for bundling.
 
 ## Build Architecture
 
-From the perspective of building, Modern.js is divided into three layers, from top to bottom:
+From a building perspective, Modern.js is divided into three layers, from top to bottom:
 
-- Upper-layer framework: Modern.js.
-- Universal build engine: Modern.js Builder.
-- Low-level bundlers: webpack and rspack.
+- Upper-level development framework: Modern.js.
+- Common build engine: Modern.js Builder.
+- Low-level bundler: webpack and Rspack.
 
 <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ width: '100%', maxWidth: '540px' }} />
 
 ## Builder Documentation
 
-Since Modern.js Builder is a module that can be used independently, we provide a separate document for it, the site address is: [modernjs.dev/builder](https://modernjs.dev/builder).
+Since Modern.js Builder is a module that can be used independently, we have provided separate documentation for it, which can be found at [modernjs.dev/builder](https://modernjs.dev/builder/en).
 
-In this document, you can learn about the detailed introduction of Modern.js Builder, and you can also find a complete usage guide for each building features. When you encounter building issues, it is recommended that you first read the Modern.js Builder documentation to solve them.
+In this documentation, you can learn about the detailed introduction of Modern.js Builder, and you can also find complete usage guides for various building capabilities. If you have any building needs or problems, it is recommended that you read the Modern.js Builder documentation first to solve them.
 
-## Builder Config
+## Builder Configuration
 
-The config of Modern.js is inherited from Modern.js Builder, so you can use all build configs provided by Modern.js Builder in Modern.js.
+Modern.js's configuration inherits from Modern.js Builder, so you can use all the build configurations provided by Modern.js Builder in Modern.js.
 
-Take the `html.title` config of Modern.js Builder as an example, you can directly use this config in the `modern.config.ts` file, and it will be automatically passed to Modern.js Builder.
+Taking the `html.title` config option of Modern.js Builder as an example, you can directly use this option in the `modern.config.ts` file, and it will be automatically passed to Modern.js Builder.
 
 ```ts title="modern.config.js"
 export default defineConfig({
@@ -38,10 +38,10 @@ export default defineConfig({
 });
 ```
 
-For details of building configs, please refer to [「Modern.js Builder - Builder Config」](https://modernjs.dev/builder/en/guide/basic/builder-config.html).
+For detailed information about build configuration, please refer to [「Modern.js Builder - Builder Config」](https://modernjs.dev/builder/en/guide/basic/builder-config.html).
 
-## Building Features
+## Builder Capabilities
 
-Modern.js Builder provides a wealth of building features, including dozens of features such as JavaScript compilation, CSS compilation, static resource processing, hot module replacement, code compression, and TS type checking.
+Modern.js Builder provides rich build capabilities, including JavaScript compilation, CSS compilation, static resource processing, code hot update, code compression, TS type checking, and dozens of other capabilities.
 
-We recommend you to read [「Modern.js Builder - All Features」](https://modernjs.dev/builder/en/guide/features.html) to learn all the building features provided by Modern.js Builder.
+We recommend that you read [「Modern.js Builder - All Features」](https://modernjs.dev/builder/en/guide/features.html) to learn about all the features provided by Modern.js Builder.

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

@@ -2,21 +2,21 @@
 sidebar_position: 1
 ---
 
-# Entries
+# Entry
 
-Through this chapter, you can learn about the entry convention in Modern.js and how to customize the entry.
+In this chapter, you will learn about the entry convention in Modern.js and how to customize it.
 
-## What is an Entry
+## What is Entry?
 
-**Entry is the starting module of a page.**
+**Entry refers to the starting module of a page.**
 
-In the Modern.js project, each entry corresponds to an independent page, and also corresponds to a server route. By default, Modern.js will automatically determine the entry of the page based on the directory convention, and also supports customizing the entry through configuration items.
+In a Modern.js project, each entry corresponds to an independent page and a server-side route. By default, Modern.js automatically determines the entry of a page based on directory conventions, but also supports customizing the entry through configuration options.
 
-Many configuration items provided by Modern.js are divided by entry, such as page title, HTML template, page Meta information, whether to enable SSR/SSG, server-side routing rules, etc.
+Many configuration options provided by Modern.js are divided by entry, such as page title, HTML template, page meta information, whether to enable SSR/SSG, server-side routing rules, etc.
 
 ## Single Entry and Multiple Entries
 
-The project initialized by Modern.js is single-entry (SPA), and the project structure is as follows:
+The project initialized by Modern.js is a single entry (SPA) project, with the following structure:
 
 ```
 .
@@ -30,7 +30,7 @@ The project initialized by Modern.js is single-entry (SPA), and the project stru
 └── tsconfig.json
 ```
 
-Modern.js can easily switch from single entry to multiple entry. You can execute `pnpm run new` under the project to create entry through generator:
+In a Modern.js project, you can easily switch from single entry to multiple entries by running `pnpm run new` in the project directory and creating an entry:
 
 ```bash
 ? Please select the operation you want: Create Element
@@ -38,7 +38,7 @@ Modern.js can easily switch from single entry to multiple entry. You can execute
 ? Please fill in the entry name: new-entry
 ```
 
-After execution, Modern.js will automatically generate a new entry directory, and you can see that the `src/` directory has the following structure:
+After running the command, Modern.js will automatically generate a new entry directory. At this point, you can see that the `src/` directory has the following structure:
 
 ```bash
 .
@@ -54,51 +54,55 @@ After execution, Modern.js will automatically generate a new entry directory, an
         └── page.tsx
 ```
 
-The original code was moved to the directory with the same name as the `name` in the `package.json`, and a new directory was created.
+The original entry code has been moved to a directory with the same name as the `name` field in `package.json`, and a `new-entry` entry directory has been created.
 
-After executing `pnpm run dev`, you can see that a `/new-entry` route has been added, and the migrated code route has not changed.
+After running `pnpm run dev`, you can see a new route named `/new-entry` has been added, and the migrated code route has not changed.
 
 :::tip
-Modern.js will use the entry with the same name as the `name` field in the package.json file as the main entry, the route of the main entry is `/`, and the route of other entries is `/{entryName}`.
+Modern.js will use the entry with the same name as the `name` field in `package.json` as the main entry. The route of the main entry is `/`, and the route of other entries is `/{entryName}`.
 
-For example, when `name` in package.json is `myapp`, `src/myapp` will be used as the main entry of the project.
+For example, when the `name` field in `package.json` is `myapp`, `src/myapp` will be the main entry of the project.
 
 :::
 
-## Entry Type
+## Entry Types
 
-Different entry types have different compile and run-time behaviors. When creating a project in Modern.js, developers can manually choose to create a project in **framework mode** or **build mode**. After the creation is complete, you can see that the project template files for different modes are different.
+Different entry types have different compilation and runtime behaviors.
 
-By default, Modern.js will scan the files under `src/` before starting the project, identify the entry, and generate the corresponding server-side route.
+import EntryMode from '@site-docs-en/components/entry-mode.mdx';
+
+<EntryMode />
+
+By default, Modern.js scans the files under `src/` before starting the project, identifies the entry, and generates the corresponding server-side route.
 
 :::tip
-You can change the entry directory to another directory through [source.entriesDir](/configure/app/source/entries-dir).
+You can modify the directory for entry identification by using the [source.entriesDir](/configure/app/source/entries-dir) config.
 
 :::
 
-Not all first-level directories under `src/` will become project entries, and the directory where the entry is located must meet one of the following four conditions:
+Not all top-level directories under `src/` become project entries. The directory where the entry is located must meet one of the following four conditions:
 
-1. Have a `routes/` directory
-2. Has `App.[jt]sx?` file
-3. Has `index.[jt]sx?` file
-4. Has a `pages/` directory (Modern.js 1.0 compatible)
+1. Has a `routes/` directory.
+2. Has an `App.[jt]sx?` file.
+3. Has an `index.[jt]sx?` file.
+4. Has a `pages/` directory (compatible with Modern.js 1.0).
 
-When the `src/` directory meets the entry characteristics, Modern.js will consider the current project as a single-entry application.
+When the `src/` directory meets the entry requirements, Modern.js considers the current project as a single entry application.
 
 :::tip
-In single-entry applications, the default entry is named `main`.
+In a single entry application, the default entry name is `main`.
 
 :::
 
-When the project is not a single-entry application, Modern.js will further check the first-level directory under `src/`.
+When the project is not a single entry application, Modern.js will further look at the top-level directories under `src/`.
 
 ### Framework Mode Entry
 
-Framework mode refers to the need to use the capabilities of the Modern.js framework, such as Router, SSR, integrated calls, etc. Under this kind of entry agreement, the entry defined by the developer is not the real Webpack compilation entry. Modern.js will generate an encapsulated entry when it starts, and the real entry can be found in `node_modules/.modern/{entryName}/index.js`.
+Framework mode refers to the need to use Modern.js framework capabilities, such as Router, SSR, integrated calls, etc. Under this type of entry convention, the entry defined by the developer is not a real webpack compilation entry. Modern.js will generate a wrapped entry during startup, and you can find the real entry in `node_modules/.modern/{entryName}/index.js`.
 
 #### Conventional Routing
 
-If there is a `routes/` directory in the entry, Modern.js will scan the files under `routes/` at startup, and automatically generate client-side routes (react-router) based on file conventions. For example:
+If there is a `routes/` directory in the entry, Modern.js will scan the files under `routes/` during startup, and automatically generate client-side routes (react-router) based on file conventions. For example:
 
 ```bash
 .
@@ -108,11 +112,13 @@ If there is a `routes/` directory in the entry, Modern.js will scan the files un
 │       └── page.tsx
 ```
 
-For details, please refer to [routing](/guides/basic-features/routes#conventional-routing).
+In the above directory, the component exported in `layout.tsx` will be the outermost component, and the component exported in `page.tsx` will be the component of the `/` route.
+
+For more information, please refer to [Conventional Routing](/guides/basic-features/routes.html#conventional-routing).
 
 #### Self-controlled Routing
 
-If there is an `App.[jt]sx?` file in the entry, the developer can freely set the client route in this file, or not set the client route.
+If there is an `App.[jt]sx?` file in the entry, developers can set the client-side route in this file through code, or not set the client-side route.
 
 ```tsx
 import { BrowserRouter, Route, Routes } from '@modern-js/runtime/router';
@@ -129,11 +135,11 @@ export default () => {
 };
 ```
 
-For details, please refer to [routing](/guides/basic-features/routes#self-controlled-routing).
+For more information, please refer to [Self-controlled Routing](/guides/basic-features/routes.html#self-controlled-routing).
 
 #### Custom Bootstrap
 
-If there is an `index.[jt]sx` file in the entry, and when the file defaults to exporting functions, Modern.js will pass the default bootstrap function as an imported parameter, and replace the default bootstrap with the exported function, so that developers can customize Mounting components to DOM nodes, or adding custom behavior before mounting. E.g:
+If there is an `index.[jt]sx` file in the entry, and the file exports a function by default, Modern.js will pass the default `bootstrap` function as a parameter and use the exported function to replace the default `bootstrap`. This way, developers can customize how components are mounted to DOM nodes or add custom behavior before mounting. For example:
 
 ```tsx
 export default (App: React.ComponentType, bootstrap: () => void) => {
@@ -144,12 +150,7 @@ export default (App: React.ComponentType, bootstrap: () => void) => {
 };
 ```
 
-:::warning
-Since the bootstrap function needs to be compatible with React17 and React18, you need to manually pass in ReactDOM parameters when calling the bootstrap function.
-
-:::
-
-The content of the file generated by Modern.js is as follows:
+At this point, the generated file content of Modern.js is as follows:
 
 ```js
 import React from 'react';
@@ -180,9 +181,9 @@ export default AppWrapper;
 
 ### Build Mode Entry
 
-Build mode refers to the ability not to use any Modern.js runtime, and the developer defines the entry of the project Webpack completely by himself.
+Build mode refers to not using any Modern.js runtime capabilities and completely defining the project's webpack entry by the developer.
 
-If `index.[jt]sx` exists in the entry and there is no default export function, then this file is the real Webpack entry file. This is similar to [Create React App](https://github.com/facebook/create-react-app), you need to mount components to DOM nodes, add hot update code, etc. For example:
+If there is an `index.[jt]sx` file in the entry and it does not export a default function, then this file is the real webpack entry file. Similar to [Create React App](https://github.com/facebook/create-react-app), you need to mount the component to the DOM node by yourself, add hot update code, etc. For example:
 
 ```js title=src/index.jsx
 import React from 'react';
@@ -192,13 +193,13 @@ import App from './App';
 ReactDOM.render(<App />, document.getElementById('root'));
 ```
 
-Modern.js **not recommended** new project to use this method, this method loses some capabilities of the framework, such as the `runtime` configuration in the **`modern.config.js` file will no longer take effect**. But this method will be very useful when the project is migrated from other frameworks to Modern.js, such as CRA, or webpack that is manually built by yourself.
+Modern.js **does not recommend** using this method for new projects, as it loses some of the framework's capabilities, such as the `runtime` configuration in the `modern.config.js` file will no longer take effect. However, this method can be very useful when migrating projects from other frameworks to Modern.js, such as CRA, or manually building webpack.
 
-## Specify Entry Using Configuration
+## Specifying Entry Using Configuration
 
-Most existing projects are not built according to the directory convention of Modern.js. If you want to change to the directory structure agreed by Modern.js, there will be a certain migration cost.
+Most existing projects are not built according to the directory structure of Modern.js. If you want to change to the directory structure of Modern.js, there will be certain migration costs.
 
-In this case, instead of generating the entry using file conventions, you can manually configure the entry in `modern.config.[jt]s`.
+In this case, in addition to using file conventions to generate entries, you can manually configure the entry in `modern.config.[jt]s`.
 
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -213,11 +214,11 @@ export default defineConfig({
 });
 ```
 
-### Disable Default Entries
+### Disable Default Entry Scanning
 
-When using a custom entry, part of the project structure may happen to hit the directory convention of Modern.js, but in fact this part of the directory is not the real entry.
+When using custom entries, part of the project structure may coincidentally hit the directory conventions of Modern.js, but in fact, this part of the directory is not the real entry.
 
-Modern.js provides `disableDefaultEntries` config to disable default entry scanning rules. When you need to customize the entry, you generally need to use `disableDefaultEntries` with `entries`. In this way, some existing projects can be quickly migrated without modifying the directory structure.
+Modern.js provides the `disableDefaultEntries` configuration to disable the default entry scanning rules. When you need to customize the entry, you generally need to use `disableDefaultEntries` in combination with `entries`. This way, some existing projects can be quickly migrated without modifying the directory structure.
 
 ```ts title="modern.config.ts"
 export default defineConfig({

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

@@ -29,3 +29,11 @@ Please refer to [Modern.js Builder - Exceptions FAQ](https://modernjs.dev/builde
 - 'compilation' argument error when webpack compiling?
 - Compile error `You may need additional loader`?
 - Find `exports is not defined` runtime error?
+
+## HMR FAQ
+
+Please refer to [Modern.js Builder - HMR FAQ](https://modernjs.dev/builder/guide/faq/hmr.html), such as:
+
+- HMR not working when external React?
+- HMR not working when setting filename hash in development mode?
+- HMR not working when updating React components?

package/docs/zh/configure/app/output/css-modules.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: cssModules
+---
+
+# output.cssModules
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [output.cssModules](https://modernjs.dev/builder/api/config-output.html#outputcssmodules)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/output/cssModules.md';
+
+<Main />

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

@@ -14,7 +14,7 @@ Modern.js Builder 是 Modern.js 体系的核心组件之一，它是一个面向
 
 - 上层研发框架：Modern.js。
 - 通用构建引擎：Modern.js Builder。
-- 底层打包工具：webpack 和 rspack。
+- 底层打包工具：webpack 和 Rspack。
 
 <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ width: '100%', maxWidth: '540px' }} />
 

package/docs/zh/guides/concept/entries.mdx

@@ -30,7 +30,7 @@ Modern.js 初始化的项目是单入口的（SPA），项目结构如下：
 └── tsconfig.json
 ```
 
-在 Modern.js 项目中，你可以很方便的将单入口切换成多入口，直接在项目下执行 `pnpm run new`，通过生成器创建入口即可：
+在 Modern.js 项目中，你可以很方便的将单入口切换成多入口，直接在项目下执行 `pnpm run new`，根据提示创建入口即可：
 
 ```bash
 ? 请选择你想要的操作 创建工程元素
@@ -54,34 +54,38 @@ Modern.js 初始化的项目是单入口的（SPA），项目结构如下：
         └── page.tsx
 ```
 
-原本的代码被移动到了和 `package.json` 中 `name` 同名的目录下，并创建了新的目录。
+原本的入口代码被移动到了和 `package.json` 中 `name` 同名的目录下，并创建了 `new-entry` 入口目录。
 
 执行 `pnpm run dev` 后，可以看到新增了一条名为 `/new-entry` 的路由，并且被迁移的代码路由并未发生变化。
 
 :::tip
-Modern.js 会将与 package.json 文件中 `name` 字段同名的入口作为主入口，主入口的路由为 `/`，其他入口的路由为 `/{entryName}`。
+Modern.js 会将与 `package.json` 文件中 `name` 字段同名的入口作为主入口，主入口的路由为 `/`，其他入口的路由为 `/{entryName}`。
 
-比如，package.json 中的 `name` 为 `myapp` 时，`src/myapp` 会作为项目的主入口。
+比如，`package.json` 中的 `name` 为 `myapp` 时，`src/myapp` 会作为项目的主入口。
 
 :::
 
 ## 入口类型
 
-不同的入口类型具有不同的编译和运行时行为。在 Modern.js 创建项目时，开发者可以手动选择创建**框架模式**或是**构建模式**的项目。完成创建后，可以看到不同模式的项目样板文件是不同的。
+不同的入口类型具有不同的编译和运行时行为。
+
+import EntryMode from '@site-docs/components/entry-mode.mdx';
+
+<EntryMode />
 
 默认情况下，Modern.js 启动项目前会对 `src/` 下的文件进行扫描，识别入口，并生成对应的服务端路由。
 
 :::tip
-可以通过 [source.entriesDir](/configure/app/source/entries-dir) 更改入口目录为其他目录。
+可以通过 [source.entriesDir](/configure/app/source/entries-dir) 修改页面的入口识别目录。
 
 :::
 
 并非 `src/` 下所有的一级目录都会成为项目入口, 入口所在目录必须满足以下四个条件之一：
 
-1. 具有 `routes/` 目录
-2. 具有 `App.[jt]sx?` 文件
-3. 具有 `index.[jt]sx?` 文件
-4. 具有 `pages/` 目录（兼容 Modern.js 1.0）
+1. 具有 `routes/` 目录。
+2. 具有 `App.[jt]sx?` 文件。
+3. 具有 `index.[jt]sx?` 文件。
+4. 具有 `pages/` 目录（兼容 Modern.js 1.0）。
 
 当 `src/` 目录满足入口特征时，Modern.js 会认为当前项目为单入口应用。
 
@@ -94,7 +98,7 @@ Modern.js 会将与 package.json 文件中 `name` 字段同名的入口作为主
 
 ### 框架模式入口
 
-框架模式指需要使用 Modern.js 框架能力，例如 Router、SSR、一体化调用等。这类入口约定下，开发者定义的入口并不是真正的 Webpack 编译入口。Modern.js 在启动时会生成一个封装过的入口，可以在 `node_modules/.modern/{entryName}/index.js` 找到真正的入口。
+框架模式指需要使用 Modern.js 框架能力，例如 Router、SSR、一体化调用等。这类入口约定下，开发者定义的入口并不是真正的 webpack 编译入口。Modern.js 在启动时会生成一个封装过的入口，可以在 `node_modules/.modern/{entryName}/index.js` 找到真正的入口。
 
 #### 约定式路由
 
@@ -135,7 +139,7 @@ export default () => {
 
 #### 自定义 Bootstrap
 
-如果入口中存在 `index.[jt]sx` 文件，并且当文件默认导出函数时，Modern.js 会将默认的 bootstrap 函数作为入参传入，并用导出的函数替代默认的 bootstrap，这样开发者可以自定义将组件挂载到 DOM 节点上，或在挂载前添加自定义行为。例如：
+如果入口中存在 `index.[jt]sx` 文件，并且当文件默认导出函数时，Modern.js 会将默认的 `bootstrap` 函数作为入参传入，并用导出的函数替代默认的 `bootstrap`，这样开发者可以自定义将组件挂载到 DOM 节点上，或在挂载前添加自定义行为。例如：
 
 ```tsx
 export default (App: React.ComponentType, bootstrap: () => void) => {
@@ -178,9 +182,9 @@ export default AppWrapper;
 
 ### 构建模式入口
 
-构建模式是指不使用任何 Modern.js 运行时的能力，完全由开发者自己定义项目 Webpack 的入口。
+构建模式是指不使用任何 Modern.js 运行时的能力，完全由开发者自己定义项目 webpack 的入口。
 
-如果入口中存在 `index.[jt]sx` ，并且没有默认导出函数时，这时候该文件就是真正的 Webpack 入口文件。这里和 [Create React App](https://github.com/facebook/create-react-app) 类似，需要自己将组件挂载到 DOM 节点、添加热更新代码等。例如:
+如果入口中存在 `index.[jt]sx` ，并且没有默认导出函数时，这时候该文件就是真正的 webpack 入口文件。这里和 [Create React App](https://github.com/facebook/create-react-app) 类似，需要自己将组件挂载到 DOM 节点、添加热更新代码等。例如:
 
 ```js title=src/index.jsx
 import React from 'react';

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

@@ -29,3 +29,11 @@ sidebar_position: 3
 - webpack 编译出现 'compilation' argument 报错？
 - 编译时报错 `You may need additional loader`？
 - 打开页面后报错，提示 `exports is not defined`？
+
+## 热更新问题
+
+请参考 [「Modern.js Builder - 热更新问题」](https://modernjs.dev/builder/guide/faq/hmr.html)，比如：
+
+- 打包时 external React 后，热更新不生效？
+- 开发环境设置文件名的 hash 后，热更新不生效？
+- React 组件的热更新无法生效？

package/package.json

@@ -15,13 +15,13 @@
     "modern",
     "modern.js"
   ],
-  "version": "0.0.0-next-1686120584093",
+  "version": "0.0.0-next-1686150530663",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "0.0.0-next-1686120584093"
+    "@modern-js/builder-doc": "0.0.0-next-1686150530663"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -33,9 +33,9 @@
     "fs-extra": "^10",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/builder-doc": "0.0.0-next-1686120584093",
-    "@modern-js/doc-tools": "0.0.0-next-1686120584093",
-    "@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-1686120584093"
+    "@modern-js/builder-doc": "0.0.0-next-1686150530663",
+    "@modern-js/doc-tools": "0.0.0-next-1686150530663",
+    "@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-1686150530663"
   },
   "scripts": {
     "dev": "modern dev",