@modern-js/module-tools-docs 2.25.1 → 2.25.2

package/docs/en/guide/faq/build.mdx

@@ -0,0 +1,247 @@
+# Build FAQ
+
+## Product FAQ
+
+import BuildProductFAQ from '@site-docs-en/components/faq-build-product';
+
+<BuildProductFAQ/>
+
+### Initialization of Class Fields
+
+TypeSript provides the `useDefineForClassFields` configuration to control the conversion handling for `public class fields`.
+
+If we have a piece of code:
+
+``` ts
+class C {
+  foo = 100;
+  bar: string;
+}
+```
+
+When `useDefineForClassFields` is `false`, then the compiled code will look like:
+
+``` ts
+class C {
+  constructor() {
+    this.foo = 100;
+  }
+}
+```
+
+When `useDefineForClassFields` is `true`, then the compiled code will look like:
+
+``` ts
+class C {
+  constructor() {
+    Object.defineProperty(this, "foo", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: 100,
+    });
+    Object.defineProperty(this, "bar", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: void 0,
+    });
+  }
+}
+```
+
+Also the default value of this configuration will change depending on the [`target`](https://www.typescriptlang.org/tsconfig#target) configuration of tsconfig.json: When `target` is ES2022 or higher, then `useDefineForClassFields` is configured to `true` by default, otherwise it defaults to `false`.
+
+For more information on this configuration of TypeScript, you can refer to the following link:
+
+- [The useDefineForClassFields Flag and The declare Property Modifier](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#the-usedefineforclassfields-flag-and-the-declare-property-modifier)
+
+The Modern.js Module will currently process according to the following logic:
+
+1. The first decision to enable this feature inside Modern.js Module is based on the `useDefineForClassFields` configuration in tsconfig.json of the current project. Currently, only the contents of the tsconfig.json file under the current project path will be read, and the final tsconfig configuration based on the [`extends`](https://www.typescriptlang.org/tsconfig#extends) configuration is not supported at this time.
+2. If the `useDefineForClassFields` configuration of tsconfig.json is not detected, the default value is determined based on the `target` configuration of tsconfig.json. If `target` is greater than `ES2022` (including `EsNext`), then `useDefineForClassFields` defaults to `true`, otherwise it is `false`.
+3. If the `target` of tsconfig.json is not detected, it is processed according to the value of `useDefineForClassFields` as `true`.
+
+### babel-plugin-lodash treats the introduced lodash as `undefined`
+
+This problem occurs when using something like the following:
+
+``` ts
+import * as Lodash from 'lodash';
+
+export const libs = {
+  _: Lodash,
+}
+```
+
+Current related issues on the `babel-plugin-lodash` Github:
+
+- [#235](https://github.com/lodash/babel-plugin-lodash/issues/235)
+
+The solution to this problem is to remove `babel-plugin-lodash`, since the plugin is not needed for on-demand referencing at this point and using it would have side effects.
+
+A similar situation occurs with `babel-plugin-import`. If there is code like the following:
+
+``` ts
+import * as Comps from 'components';
+
+export const libs = {
+  comps: Comps,
+};
+```
+
+In this case `babel-plugin-import` may also cause `Comps` to become `undefined`. So you need to remove the corresponding `babel-plugin-import` as well.
+
+## Exceptions FAQ
+
+import BuildExceptionFAQ from '@site-docs-en/components/faq-build-exception';
+
+<BuildExceptionFAQ />
+
+### Dynamic require of "react" is not supported
+
+#### Problem Description
+
+When the product format in the product configuration of the build is ES modules.
+
+``` ts
+export default defineConfig({
+  buildConfig: {
+    format: 'esm',
+  },
+});
+```
+
+If you import a cjs product from a third-party npm package, the resulting product may not work properly under webpack.
+
+![](https://lf3-static.bytednsdoc.com/obj/eden-cn/shylnyhaeh7uldvivhn/1280X1280.png)
+
+#### Solution
+
+1. **First you need to find which third-party package is causing the problem**. For example, if the error message points to the `react` package, then look for a third-party package that has code like `require('react')` in it. For example [`react-draggable`](https://www.npmjs.com/package/react-draggable), which only contains `cjs` products, then the problem is localized to the `react-draggable` package.
+2. Then we need to exclude this package with the following configuration, i.e. **not package problematic third-party packages**.
+
+``` ts
+export default defineConfig({
+  buildConfig: {
+    externals: ['react-draggable'],
+  }
+});
+```
+
+#### Reference Links
+
+- [When using esbuild with external react I get Dynamic require of "react" is not supported](https://stackoverflow.com/questions/68423950/when-using-esbuild-with-external-react-i-get-dynamic-require-of-react-is-not-s)
+
+### During compilation, an error was reported in the less file of a component library:`'Operation on an invalid type'`
+
+This is probably because the component library depends on Less version v3, while Modern.js Module defaults to v4. v3 and v4 have a Break Change in the `math` configuration, check this [link](https://stackoverflow.com/questions/73298187/less-error-operation-on-an-invalid-type-in-antd-dependency) for details.
+
+Therefore, if a component library like this is used in the source code:
+
+`buildPreset` is used in the build configuration, make the following changes:
+
+``` js
+module.exports = {
+  buildPreset({ extendPreset }) {
+    return extendPreset('your-build-preset', {
+      style: {
+        less: {
+          lessOptions: {
+            math: 'always',
+          },
+        },
+      },
+    });
+  },
+}
+```
+
+Or, if a custom `buildConfig` is used, modify it as follows:
+
+``` js
+module.exports = {
+  buildConfig: {
+    style: {
+      less: {
+        lessOptions: {
+          math: 'always',
+        },
+      },
+    },
+  }
+};
+```
+
+If you are using a component like this in Storybook, you will need to modify the debugging configuration of Storybook:
+
+```js
+module.exports = {
+  dev: {
+    storybook: {
+      webpackChain(chain, { CHAIN_ID }) {
+        chain.module
+          .rule(CHAIN_ID.RULE.LESS)
+          .use(CHAIN_ID.USE.LESS)
+          .tap(options => {
+            options.lessOptions = {
+              ...options.lessOptions,
+              math: 'always',
+            };
+            return options;
+          });
+      },
+    },
+  },
+}
+```
+
+### Bundle DTS failed
+
+Normally, the type file output with `tsc` is loose. Modern.js Module not only supports outputting loose type file products, but also supports packing type files, which allows you to package these loose type files and third-party dependent type files into one file.
+
+However, there is a risk in packaging the type files of third-party dependencies, **because there are cases where the type files of third-party dependencies cannot be packaged**.
+
+So when you encounter a `Bundle DTS failed` error message during the Modern.js Module build, you can observe that the error message comes from a third-party dependency. Try setting [`dts.respectExternal`](/api/config/build-config.html#dtsrespectexternal) to `false` to disable the behavior of packing type files of third-party dependencies.
+
+### Error reported for `defineConfig` function type: `If there is no reference to "..." then the inferred type of "default" cannot be named`
+
+Check if the [`include`](https://www.typescriptlang.org/tsconfig#include)  configuration exists in the project's tsconfig.json file, and if not, try adding the following:
+
+```json
+{
+  "include": ["src"]
+}
+```
+
+## Other FAQ
+
+import BuildOtherFAQ from '@site-docs-en/components/faq-build-other';
+
+<BuildOtherFAQ />
+
+### Add additional compilation feature
+
+The Modern.js Module is based on the esbuild implementation, so if you have special needs or want to add additional compilation capabilities, you can do so by implementing the esbuild plugin.
+
+The Modern.js Module provides [`esbuildOptions`](/api/config/build-config.html#esbuildoptions) configuration to allow modification of Modern.js's internal esbuild configuration, so that custom esbuild plugins can be added via this configuration:
+
+``` js
+export default defineConfig({
+  buildConfig: {
+    esbuildOptions: options => {
+      options.plugins = [
+        ...options.plugins,
+        yourEsbuildPlugin,
+      ];
+      return option;
+    },
+  },
+});
+```
+
+### Support for generating TypeScript declaration files for CSS Modules
+
+- First Solution: [typed-css-modules](https://github.com/Quramy/typed-css-modules)
+- Second Solution: [postcss-modules-dts](https://www.npmjs.com/package/@guanghechen/postcss-modules-dts)
+

package/docs/en/guide/faq/index.md

@@ -0,0 +1,7 @@
+# FAQ
+
+Here is a list of all frequently asked questions about Modern.js Module.
+
+- [Build FAQ](./build.mdx)
+- [Test FAQ](./test.mdx)
+- [Storybook FAQ](./storybook.mdx)

package/docs/en/guide/faq/storybook.mdx

@@ -0,0 +1,102 @@
+# Storybook FAQ
+
+import BuildStorybookFAQ from '@site-docs-en/components/faq-storybook';
+
+<BuildStorybookFAQ />
+
+## Storybook v7 Support
+
+Storybook v7 does not support it yet. Rspack builds are currently planned to be supported in Storybook v7, so progress will be slower.
+
+Related Issue: [#3376](https://github.com/web-infra-dev/modern.js/issues/3376).
+
+## Using Storybook Addon or other configurations does not work
+
+Modern.js Module is currently using Storybook version v6, if you are using Addon version v7 you may not be able to get the addon to work.
+
+In addition to the Addon, other configurations may also have differences. For example, if you modify the `preview.js` configuration file, Storybook v6 is written differently than v7:
+
+- v6：[Document](https://storybook.js.org/docs/6.5/react/writing-stories/decorators#global-decorators)
+- v7：[Document](https://storybook.js.org/docs/react/writing-stories/decorators#global-decorators)
+
+## Cannot find module 'react-dom/package.json
+
+When debug Storybook, the following problem occurs:
+
+```bash
+ERR! Error: Cannot find module 'react-dom/package.json'
+```
+
+You can install the react-dom dependency in the project.
+
+``` json
+{
+    "devDependencies": {
+        "react-dom": "^17"
+    }
+}
+```
+
+## Unable to locate the specific error message
+
+Solutions:
+
+1. Find `@storybook/core-server/dist/cjs/dev-server.js`
+2. Find this code: `var _await$Promise$all = await Promise.all([preview, manager,`.
+3. Modify it：
+
+``` js
+var _await$Promise$all = await Promise.all([
+    preview.catch(e => console.info(e)),
+    manager // TODO #13083 Restore this when compiling the preview is fast enough
+  // .then((result) => {
+  //   if (!options.ci && !options.smokeTest) openInBrowser(address);
+  //   return result;
+  // })
+  .catch(previewBuilder.bail)]),
+      _await$Promise$all2 = _slicedToArray(_await$Promise$all, 2),
+      previewResult = _await$Promise$all2[0],
+      managerResult = _await$Promise$all2[1]; // TODO #13083 Remove this when compiling the preview is fast enough
+```
+
+## Can`t find any stories is your Storybook
+
+![storybook-error](https://lf3-static.bytednsdoc.com/obj/eden-cn/shylnyhaeh7uldvivhn/01719a11-1939-4009-9317-5e2b491ae52f.png)
+
+When you get a problem like this, you can first open the browser console and there should be some error messages. You can use the error messages to deduce if there is a problem in the code you are writing that is causing Storybook to not work properly.
+
+## Storybook Adds Proxy Functionality
+
+Storybook does not provide a solution for this, but there is one in the Storybook Issue. In the Modern.js Module, you can:
+
+1. Add the `config/storybook/middleware.js` file and initialize the following:
+
+``` js
+/* eslint-disable filenames/match-exported */
+module.exports = function expressMiddleware(router) {
+    // router is express router
+    // import { Router } from 'express'
+    // router = new Router();
+};
+```
+
+2. add `http-proxy-middleware` dependency
+3. Add proxy routing-related configuration
+
+``` js
+/* eslint-disable filenames/match-exported */
+const { createProxyMiddleware } = require("http-proxy-middleware");
+
+module.exports = function expressMiddleware (router) {
+  router.use('/api', createProxyMiddleware({
+    target: "http://localhost:8000",
+    changeOrigin: true
+  }))
+}
+```
+
+Link：https://github.com/storybookjs/storybook/issues/11551
+
+## Modify the directory where the Story file exists
+
+The directory where Story files are stored cannot be modified at the moment, only the `*.stories.(t|j)s(x)` and `*.stories.md(x)` files in the `your-project/stories` directory are recognized as Story files.

package/docs/en/guide/faq/test.mdx

@@ -0,0 +1,11 @@
+# Test FAQ
+
+import TestFAQ from '@site-docs-en/components/faq-test';
+
+<TestFAQ />
+
+### Execute `test` command with an error `TypeError: Cannot read property 'testEnvironmentOptions' of undefined`
+
+![jest-error](https://lf3-static.bytednsdoc.com/obj/eden-cn/shylnyhaeh7uldvivhn/jest-error-testEnvironmentOptions-of-undefined.jpeg)
+
+You can check whether other projects in Monorepo have `jest-environment-jsdom` dependencies and unify them with the overrides provided by Monorepo.

package/docs/en/guide/intro/welcome.md

@@ -6,7 +6,7 @@ sidebar_position: 1
 
 Module Tools is a modules engineering solution for Modern.js, as well as a core dependency. It allows developers to build, debug, and publish module type project more easily. A module type project can mostly be thought of as an npm package type project, which may be a component, component library or tool library project.
 
-If you are planning to develop a project of the npm package type, then you came to the right place! Modern.js provides a professional module engineering solution. It gives you:
+If you are planning to develop a project of the npm package type, then you came to the right place! Modern.js provides a professional Module Tools. It gives you:
 
 - **Simple project initialization**: simply execute the `npx @modern-js/create project-dir` command, followed by a few interactive questions, to create a complete module type project. The created project also supports the choice of two package managers, [**pnpm**](https://pnpm.io/) and [**Yarn**](https://classic.yarnpkg.com/).
 - **Code formatting**: In a module project, you can execute `modern lint` to format the code. The initialized module project includes the [ESLint](https://eslint.org/docs/latest/user-guide/core-concepts#what-is-eslint) ruleset for Modern.js for most scenarios.
@@ -14,5 +14,5 @@ If you are planning to develop a project of the npm package type, then you came
 - **Storybook debugging tools**: Module Tools provides [Storybook](https://storybook.js.org/) debugging tools for debugging module projects. After installing the Storybook plugin for Module Tools, you can start it with the `modern dev storybook` command. You can use Storybook not only for debugging components, but also for other types of modules.
 - **Testing capabilities with Jest**: When you need to test a module, you can use the `modern test` command of Module Tools, which not only integrates with [Jest](https://jestjs.io/), but also provides an API for configuring [Jest](https://jestjs.io/docs/configuration).
 - **Versioning based on Changesets**: When you need to record changes to a project, you can use the `modern change` command to generate a Markdown file containing the changes; when you need to upgrade a project, you can use the `modern bump` command to analyze and upgrade the version through the Markdown file; when you need to release a project, you can use the `modern release` command to release the project; Module Tools implements these commands based on [Changesets](https://github.com/changesets/changesets).
-- **Extensible plug-in mechanism**: Want to integrate additional debugging tools for your project? Or maybe you want to do some extra processing during the build process, Module Tools provides a plugin mechanism and plugin hooks that cover both the `dev` command and the `build` command process. You can use them to extend the capabilities of your project.
+- **Extensible plugin mechanism**: Want to integrate additional debugging tools for your project? Or maybe you want to do some extra processing during the build process, Module Tools provides a plugin mechanism and plugin hooks that cover both the `dev` command and the `build` command process. You can use them to extend the capabilities of your project.
 - **Lots more!** Module Tools will continue to optimize its build and debug features in the future. If there are important issues to be solved in module project building, or if a mainstream module project debugging tool or pattern emerges, then they will probably be supported by Module Tools.

package/docs/en/plugins/guide/getting-started.mdx

@@ -80,5 +80,5 @@ With the above example, we learned the following things.
 
 In addition to the above, we also need to understand.
 
-- [plugin objects, type definitions and recommended configuration items](/en/plugins/guide/plugin-object)
+- [plugin objects, type definitions and recommended configuration options](/en/plugins/guide/plugin-object)
 - [setup functions, `api` object parameters, lifecycle hooks](/en/plugins/guide/setup-function)

package/docs/en/plugins/guide/plugin-object.mdx

@@ -64,9 +64,9 @@ const myPlugin: CliPlugin<ModuleTools> = {
 };
 ```
 
-## Plugin configuration items
+## Plugin configuration options
 
-**It is recommended to write the plugin as a function**, so that the plugin can receive configuration items via function entry.
+**It is recommended to write the plugin as a function**, so that the plugin can receive configuration options via function entry.
 
 ```ts
 import type { CliPlugin, ModuleTools } from '@modern-js/module-tools';

package/docs/en/plugins/guide/setup-function.mdx

@@ -4,7 +4,7 @@ sidebar_position: 3
 
 # Setup function
 
-In the ["Plugin object"](/plugins/guide/plugin-object) section we know that the plug-in object contains a `setup` function that not only contains an `api` object parameter, but also returns a Hooks object.
+In the ["Plugin object"](/plugins/guide/plugin-object) section we know that the plugin object contains a `setup` function that not only contains an `api` object parameter, but also returns a Hooks object.
 
 ## Plugin API objects
 

package/docs/zh/components/faq-build-exception.mdx

@@ -0,0 +1 @@
+

package/docs/zh/components/faq-test.mdx

@@ -0,0 +1 @@
+

package/docs/zh/guide/faq/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "常见问题",
+  "sidebar_position": 5
+}

package/docs/zh/guide/faq/build.mdx

@@ -0,0 +1,247 @@
+# 构建相关问题
+
+## 产物问题
+
+import BuildProductFAQ from '@site-docs/components/faq-build-product';
+
+<BuildProductFAQ/>
+
+### Class Fields 的初始化处理
+
+TypeSript 提供了 `useDefineForClassFields` 配置用于控制对于 `public class fields` 的转换处理。
+
+如果有一段代码：
+
+``` ts
+class C {
+  foo = 100;
+  bar: string;
+}
+```
+
+当 `useDefineForClassFields` 为 `false` 的时候，则编译后的代码会变为：
+
+``` ts
+class C {
+  constructor() {
+    this.foo = 100;
+  }
+}
+```
+
+当 `useDefineForClassFields` 为 `true` 的时候，则编译后的代码会变为：
+
+``` ts
+class C {
+  constructor() {
+    Object.defineProperty(this, "foo", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: 100,
+    });
+    Object.defineProperty(this, "bar", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: void 0,
+    });
+  }
+}
+```
+
+同时该配置的默认值会根据 tsconfig.json 的 [`target`](https://www.typescriptlang.org/tsconfig#target) 配置而变化：**当 `target` 是 ES2022 或者更高的时候，则 `useDefineForClassFields` 默认配置为 `true`，否则就是默认为 `false`**。
+
+关于 TypeScript 这个配置的更多信息，可以参考下面的链接：
+
+- [The useDefineForClassFields Flag and The declare Property Modifier](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#the-usedefineforclassfields-flag-and-the-declare-property-modifier)
+
+Modern.js Module 目前会根据下面的逻辑进行处理：
+
+1. 首先根据当前项目的 tsconfig.json 的 `useDefineForClassFields` 配置确定在 Modern.js Module 内部如何处理。目前只会读取当前项目路径下的 tsconfig.json 文件的内容，暂时不支持根据 [`extends`](https://www.typescriptlang.org/tsconfig#extends) 配置来获取最终的 tsconfig 配置。
+2. 如果没有检测 tsconfig.json 的 `useDefineForClassFields` 配置，则会根据 tsconfig.json 的 `target` 配置来确定默认值。如果 `target` 大于 `ES2022`（包含 `EsNext`），则`useDefineForClassFields`默认为 `true`，否则为 `false`。
+3. 如果没有检测到 tsconfig.json 的 `target`，则按照 `useDefineForClassFields`的值 为 `true` 进行处理。
+
+### babel-plugin-lodash 将引入的 lodash 处理成 `undefined`
+
+当使用类似下面的方式的时候，会出现这个问题：
+
+``` ts
+import * as Lodash from 'lodash';
+
+export const libs = {
+  _: Lodash,
+}
+```
+
+目前在 `babel-plugin-lodash` Github 上的相关 Issue：
+
+- [#235](https://github.com/lodash/babel-plugin-lodash/issues/235)
+
+这个问题的解决办法是移除 `babel-plugin-lodash`，因为此时不需要该插件进行按需引用，使用该插件会产生副作用。
+
+类似的情况在 `babel-plugin-import` 上也可能会出现。比如有类似如下的代码：
+
+``` ts
+import * as Comps from 'components';
+
+export const libs = {
+  comps: Comps,
+};
+```
+
+此时 `babel-plugin-import` 也可能会导致 `Comps` 变为 `undefined`。因此也需要移除对应的 `babel-plugin-import`。
+
+## 异常类问题
+
+import BuildExceptionFAQ from '@site-docs/components/faq-build-exception';
+
+<BuildExceptionFAQ />
+
+### Dynamic require of "react" is not supported
+
+#### 问题描述
+
+当构建的产物配置中产物格式为 ES modules 的时候：
+
+``` ts
+export default defineConfig({
+  buildConfig: {
+    format: 'esm',
+  },
+});
+```
+
+如果导入了的第三方 npm 包的 cjs 产物，那么生成的产物可能会在 webpack 下有可能无法正常运行。
+
+![](https://lf3-static.bytednsdoc.com/obj/eden-cn/shylnyhaeh7uldvivhn/1280X1280.png)
+
+#### 解决办法
+
+1. **首先需要找到是哪个第三方包引起的问题**。例如报错信息中指向了 `react` 这个包，那么就要寻找在哪个第三方包里存在 `require('react')` 这样的代码。比如 [`react-draggable`](https://www.npmjs.com/package/react-draggable) ，这个包仅包含 `cjs` 产物，那么问题定位到 `react-draggable` 这个包。
+2. 然后我们需要将这个包通过下面的配置进行排除，即**不打包存在问题的第三方包**。
+
+``` ts
+export default defineConfig({
+  buildConfig: {
+    externals: ['react-draggable'],
+  }
+});
+```
+
+#### 参考链接
+
+- [When using esbuild with external react I get Dynamic require of "react" is not supported](https://stackoverflow.com/questions/68423950/when-using-esbuild-with-external-react-i-get-dynamic-require-of-react-is-not-s)
+
+
+### 编译过程中，因为某个组件库的 less 文件报错：`'Operation on an invalid type'`
+
+可能是因为该组件库依赖的 Less 版本是 v3，而 Modern.js Module 默认是 v4。v3 与 v4 在 `math` 配置上存在有 Break Change，可以查看这个[链接](https://stackoverflow.com/questions/73298187/less-error-operation-on-an-invalid-type-in-antd-dependency) 了解详情。
+
+因此，如果是在源码中使用了类似这样的组件库：
+
+在构建配置中使用了 `buildPreset` 的情况下，按照下面进行修改：
+
+``` js
+module.exports = {
+  buildPreset({ extendPreset }) {
+    return extendPreset('your-build-preset', {
+      style: {
+        less: {
+          lessOptions: {
+            math: 'always',
+          },
+        },
+      },
+    });
+  },
+}
+```
+
+或者使用了自定义的 `buildConfig` 的情况下，按照下面进行修改：
+
+``` js
+module.exports = {
+  buildConfig: {
+    style: {
+      less: {
+        lessOptions: {
+          math: 'always',
+        },
+      },
+    },
+  }
+};
+```
+
+如果是在 Storybook 中使用了类似这样的组件，则需要修改 Storybook 的调试配置：
+
+```js
+module.exports = {
+  dev: {
+    storybook: {
+      webpackChain(chain, { CHAIN_ID }) {
+        chain.module
+          .rule(CHAIN_ID.RULE.LESS)
+          .use(CHAIN_ID.USE.LESS)
+          .tap(options => {
+            options.lessOptions = {
+              ...options.lessOptions,
+              math: 'always',
+            };
+            return options;
+          });
+      },
+    },
+  },
+}
+```
+
+### Bundle DTS failed
+
+正常情况下，使用 `tsc` Modern.js Module 不仅支持输出松散的类型文件产物，同时也支持打包类型文件，可以将这些松散的类型文件以及第三方依赖的类型文件打包成一个文件。
+
+不过，打包第三方依赖的类型文件是存在风险的，**因为存在第三方依赖的类型文件无法打包的情况**。
+
+因此当遇到 Modern.js Module 构建过程中出现 `Bundle DTS failed` 的错误信息标题的时候，可以观察报错信息是来自某个第三方依赖。尝试设置 [`dts.respectExternal`](/api/config/build-config.html#dtsrespectexternal) 为 `false` 来关闭打包第三方依赖的类型文件的行为。
+
+### `defineConfig` 函数类型报错：`如果没有引用 "..."，则无法命名 "default" 的推断类型`
+
+检查项目的 tsconfig.json 文件中是否存在 [`include`](https://www.typescriptlang.org/tsconfig#include) 配置，如果没有，则尝试增加下面的内容：
+
+```json
+{
+  "include": ["src"]
+}
+```
+
+## 其他
+
+import BuildOtherFAQ from '@site-docs/components/faq-build-other';
+
+<BuildOtherFAQ />
+
+### 增加额外的编译能力
+
+Modern.js Module 基于 esbuild 实现，因此如果有特殊需求或者想要增加额外的编译能力，可以通过实现 esbuild 插件来解决。
+
+Modern.js Module 提供了 [`esbuildOptions`](/api/config/build-config.html#esbuildoptions) 配置允许修改 Modern.js Module 内部的 esbuild 配置，因此可以通过该配置来增加自定义的 esbuild 插件：
+
+``` js
+export default defineConfig({
+  buildConfig: {
+    esbuildOptions: options => {
+      options.plugins = [
+        ...options.plugins,
+        yourEsbuildPlugin,
+      ];
+      return option;
+    },
+  },
+});
+```
+
+### 支持生成 CSS Modules 的 TypeScript 声明文件
+
+- 方案一：[typed-css-modules](https://github.com/Quramy/typed-css-modules)
+- 方案二：[postcss-modules-dts](https://www.npmjs.com/package/@guanghechen/postcss-modules-dts)