@modern-js/main-doc 2.48.2 → 2.48.3

Sign up to get free protection for your applications and to get access to all the features.
@@ -4,65 +4,18 @@ sidebar_position: 3
4
4
 
5
5
  # Build FAQ
6
6
 
7
- If you encounter build-related problems, you can refer to the following documents.
8
-
9
- ### How to import UI Component library on demand?
10
-
11
- If you need to configure the on-demand import of the component library, you can configure it through [source.transformImport](/configure/app/source/transform-import.html), which is equivalent to [babel-plugin-import](https://www.npmjs.com/package/babel-plugin-import).
12
-
13
- ```ts
14
- export default {
15
- source: {
16
- transformImport: [
17
- {
18
- libraryName: 'xxx-components',
19
- libraryDirectory: 'es',
20
- style: true,
21
- },
22
- ],
23
- },
24
- };
25
- ```
7
+ If you encounter any build-related issues, you can refer to the current document for troubleshooting.
26
8
 
27
9
  ---
28
10
 
29
- ### How to run ESLint during compilation?
30
-
31
- For the sake of compilation performance, Modern.js will not perform ESLint verification during the compilation process by default. If you need this function, you can manually install and register the [eslint-webpack-plugin](https://github.com/webpack) in the community -contrib/eslint-webpack-plugin).
32
-
33
- The sample code to register the plugin is as follows:
34
-
35
- ```js
36
- import ESLintPlugin from 'eslint-webpack-plugin';
37
-
38
- export default {
39
- tools: {
40
- bundlerChain(chain) {
41
- chain.plugin('eslint-plugin').use(ESLintPlugin, [
42
- {
43
- extensions: ['.js', '.ts', '.jsx', 'tsx', '.mjs'],
44
- },
45
- ]);
46
- },
47
- },
48
- };
49
- ```
50
-
51
- > For more detailed usage, please refer to the [eslint-webpack-plugin](https://github.com/webpack-contrib/eslint-webpack-plugin) documentation.
11
+ ### Rsbuild FAQ
52
12
 
53
- ---
13
+ Modern.js is internally based on [Rsbuild](https://rsbuild.dev/) and encapsulates its own build tool, so you can directly refer to the FAQ document of Rsbuild:
54
14
 
55
- ### How to configure CDN path for static assets?
15
+ - [Rsbuild - Features FAQ](https://rsbuild.dev/guide/faq/features)
16
+ - [Rsbuild - Exceptions FAQ](https://rsbuild.dev/guide/faq/exceptions)
17
+ - [Rsbuild - HMR FAQ](https://rsbuild.dev/guide/faq/hmr)
56
18
 
57
- If you need to upload static assets such as JS and CSS to CDN for use, you can set the URL prefix of static assets through the [output.assetPrefix](/configure/app/output/asset-prefix.html) configuration.
58
-
59
- ```js
60
- export default {
61
- output: {
62
- assetPrefix: 'https://cdn.example.com/assets/',
63
- },
64
- };
65
- ```
66
19
 
67
20
  ---
68
21
 
@@ -78,14 +31,6 @@ rm -rf ./node_modules/.cache
78
31
 
79
32
  ---
80
33
 
81
- ### How to remove console after production build?
82
-
83
- When the production environment is built, we can remove the `console` from the code, so as to avoid the log of the development environment being output to the production environment.
84
-
85
- Modern.js provides a configuration option to remove console by default, please see [performance.removeConsole](/configure/app/performance/remove-console.html).
86
-
87
- ---
88
-
89
34
  ### How to view the final generated webpack / Rspack configuration?
90
35
 
91
36
  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.
@@ -101,26 +46,6 @@ Inspect config succeed, open following files to view the content:
101
46
 
102
47
  ---
103
48
 
104
- ### How to ignore specific warnings?
105
-
106
- By default, Modern.js will print all error and warning logs generated by the build process.
107
-
108
- If a large number of warning logs are generated due to the three-party package, it cannot be processed temporarily, and you want to ignore it. Specific warning logs can be ignored through the build configuration provided by webpack / Rspack.
109
-
110
- ```ts
111
- export default {
112
- tools: {
113
- bundlerChain: chain => {
114
- chain.ignoreWarnings([/Using \/ for division outside of calc()/]);
115
- },
116
- },
117
- };
118
- ```
119
-
120
- For details, please refer to: [ignoreWarnings](https://webpack.js.org/configuration/other-options/#ignorewarnings).
121
-
122
- ---
123
-
124
49
  ### 'compilation' argument error when webpack compiling?
125
50
 
126
51
  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:
@@ -147,14 +72,6 @@ Deleting the lock file will automatically upgrade the dependency version in the
147
72
 
148
73
  ---
149
74
 
150
- ### Find ES6+ code in the compiled files?
151
-
152
- By default, Modern.js will not compile files under `node_modules` through `babel-loader` or `ts-loader`. If the npm package introduced by the project contains ES6+ syntax, it will be bundled into the output files.
153
-
154
- When this happens, you can specify directories or modules that need to be compiled additionally through the [source.include](/en/configure/app/source/include.html) configuration option.
155
-
156
- ---
157
-
158
75
  ### Failed import other modules in Monorepo?
159
76
 
160
77
  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.
@@ -169,42 +86,6 @@ There are several solutions to this problem:
169
86
 
170
87
  ---
171
88
 
172
- ### Compile error `Error: [object Object] is not a PostCSS plugin` ?
173
-
174
- Currently, Modern.js is using PostCSS v8. If you encounter the `Error: [object Object] is not a PostCSS plugin` error during the compilation process, it is usually caused by referencing the wrong version of PostCSS, for example, the version of `postcss` (peerDependencies) in `cssnano` does not meet expectations.
175
-
176
- You can find the dependencies of `UNMET PEER DEPENDENCY` through `npm ls postcss`, and then install the correct version of dependencies by specifying the PostCSS version in package.json.
177
-
178
- ```
179
- npm ls postcss
180
-
181
- ├─┬ css-loader@6.3.0
182
- │ └── UNMET PEER DEPENDENCY postcss@8.3.9
183
- ├─┬ css-minimizer-webpack-plugin@3.0.0
184
- │ └── UNMET PEER DEPENDENCY postcss@8.3.9
185
- ```
186
-
187
- ---
188
-
189
- ### Compile error `You may need additional loader`?
190
-
191
- If the following error message is encountered during the compilation process, it means that there are individual files that cannot be compiled correctly.
192
-
193
- ```bash
194
- Module parse failed: Unexpected token
195
- File was processed with these loaders:
196
- * some-loader/index.js
197
-
198
- You may need an additional loader to handle the result of these loaders.
199
- ```
200
-
201
- Solution:
202
-
203
- - If the `.ts` file outside the current project is referenced, or the `.ts` file under node_modules, please add the [source.include](/en/configure/app/source/include.html) configuration Items that specify files that require additional compilation.
204
- - If you refer to a file format that is not supported by Modern.js, please configure the corresponding webpack loader for compilation.
205
-
206
- ---
207
-
208
89
  ### Find `exports is not defined` runtime error?
209
90
 
210
91
  If the compilation is succeed, but the `exports is not defined` error appears after opening the page, it is usually because a CommonJS module is compiled by Babel.
@@ -242,75 +123,6 @@ For more information, please refer to issue: [babel#12731](https://github.com/ba
242
123
 
243
124
  ---
244
125
 
245
- ### Compilation error "export 'foo' (imported as 'foo') was not found in './utils'"?
246
-
247
- If you encounter this error during the compilation process, it means that your code is referencing an export that does not exist.
248
-
249
- For example, in the following code, `index.ts` is importing the `foo` variable from `utils.ts`, but `utils.ts` only exports the `bar` variable.
250
-
251
- ```ts
252
- // utils.ts
253
- export const bar = 'bar';
254
-
255
- // index.ts
256
- import { foo } from './utils';
257
- ```
258
-
259
- In this case, Modern.js will throw the following error:
260
-
261
- ```bash
262
- Compile Error:
263
- File: ./src/index.ts
264
- export 'foo' (imported as 'foo') was not found in './utils' (possible exports: bar)
265
- ```
266
-
267
- If you encounter this issue, the first step is to check the import/export statements in your code and correct any invalid code.
268
-
269
- There are some common mistakes:
270
-
271
- - Importing a non-existent variable:
272
-
273
- ```ts
274
- // utils.ts
275
- export const bar = 'bar';
276
-
277
- // index.ts
278
- import { foo } from './utils';
279
- ```
280
-
281
- - Re-exporting a type without adding the `type` modifier, causing compilers like Babel to fail in recognizing the type export, resulting in compilation errors.
282
-
283
- ```ts
284
- // utils.ts
285
- export type Foo = 'bar';
286
-
287
- // index.ts
288
- export { Foo } from './utils'; // Incorrect
289
- export type { Foo } from './utils'; // Correct
290
- ```
291
-
292
- In some cases, the error may be caused by a third-party dependency that you cannot modify directly. In this situation, if you are sure that the issue does not affect your application, you can add the following configuration to change the log level from `error` to `warn`:
293
-
294
- ```ts
295
- export default {
296
- tools: {
297
- webpackChain(chain) {
298
- chain.module.parser.merge({
299
- javascript: {
300
- exportsPresence: 'warn',
301
- },
302
- });
303
- },
304
- },
305
- };
306
- ```
307
-
308
- However, it is important to contact the developer of the third-party dependency immediately to fix the issue.
309
-
310
- > You can refer to the webpack documentation for more details on [module.parser.javascript.exportsPresence](https://webpack.js.org/configuration/module/#moduleparserjavascriptexportspresence).
311
-
312
- ---
313
-
314
126
  ### The compilation progress bar is stuck, but there is no Error log in the terminal?
315
127
 
316
128
  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.
@@ -420,88 +232,6 @@ After adding the above configuration, webpack will output logs for debugging. Pl
420
232
 
421
233
  ---
422
234
 
423
- ### Tree shaking does not take effect?
424
-
425
- Modern.js will enable the tree shaking function of webpack by default during production construction. Whether tree shaking can take effect depends on whether the business code can meet the tree shaking conditions of webpack.
426
-
427
- If you encounter the problem that tree shaking does not take effect, you can check whether the `sideEffects` configuration of the relevant npm package is correct. If you don't know what `sideEffects` is, or are interested in the principles behind tree shaking, you can read the following two documents:
428
-
429
- - [webpack official documentation - Tree Shaking](https://webpack.docschina.org/guides/tree-shaking/)
430
- - [Tree Shaking Troubleshooting Guide](https://bytedance.feishu.cn/docs/doccn8E1ldDct5uv1EEDQs8Ycwe)
431
-
432
- ---
433
-
434
- ### JavaScript heap out of memory when compiling?
435
-
436
- This error indicates that there is a memory overflow problem during the packaging process. In most cases, it is because the bundled content exceeds the default memory limit of Node.js.
437
-
438
- In case of OOM issues, the easiest way to fix this is by increasing the memory cap, Node.js provides the `--max-old-space-size` option to set this. You can set this parameter by adding [NODE_OPTIONS](https://nodejs.org/api/cli.html#node_optionsoptions) before the CLI command.
439
-
440
- For example, add parameters before the `modern build` command:
441
-
442
- ```diff title="package.json"
443
- {
444
- "scripts": {
445
- - "build": "modern build"
446
- + "build": "NODE_OPTIONS=--max_old_space_size=16384 modern build"
447
- }
448
- }
449
- ```
450
-
451
- If you are executing other commands, such as `modern deploy`, please add parameters before the corresponding command.
452
-
453
- The value of the `max_old_space_size` parameter represents the upper limit of the memory size (MB). Generally, it can be set to `16384` (16GB).
454
-
455
- The following parameters are explained in more detail in the official Node.js documentation:
456
-
457
- - [NODE_OPTIONS](https://nodejs.org/api/cli.html#node_optionsoptions)
458
- - [--max-old-space-size](https://nodejs.org/api/cli.html#--max-old-space-sizesize-in-megabytes)
459
-
460
- In addition to increasing the memory limit, it is also a solution to improve efficiency by enabling some compilation strategies, please refer to [Improve Build Performance](/guides/advanced-features/build-performance.html).
461
-
462
- If the above methods cannot solve your problem, it may be that some abnormal logic in the project has caused memory overflow. You can debug recent code changes and locate the root cause of problems. If it cannot be located, please contact us.
463
-
464
- ---
465
-
466
- ### Can't resolve 'core-js/modules/xxx.js' when compiling?
467
-
468
- If you get an error similar to the following when compiling, it means that [core-js](https://github.com/zloirock/core-js) cannot be resolved properly in the project.
469
-
470
- ```text
471
- Module not found: Can't resolve 'core-js/modules/es.error.cause.js'
472
- ```
473
-
474
- Usually, you don't need to install `core-js` in the project, because the Modern.js already has a built-in `core-js` v3.
475
-
476
- If there is an error that `core-js` cannot be found, there may be several reasons:
477
-
478
- 1. The `plugins` configured by Babel is overwritten in the project, causing the built-in `babelPluginLockCorejsVersion` does not work. In this case, just change `tools.babel` to a function:
479
-
480
- ```ts
481
- // Wrong usage, will override Modern.js's default Babel plugins
482
- export default {
483
- tools: {
484
- babel: {
485
- plugins: ['babel-plugin-xxx'],
486
- },
487
- },
488
- };
489
-
490
- // Correct usage, add a new plugin in the default configuration instead of overriding the plugin
491
- export default {
492
- tools: {
493
- babel(config) {
494
- config.plugins.push('babel-plugin-xxx');
495
- },
496
- },
497
- };
498
- ```
499
-
500
- 2. Some code in the project depends on `core-js` v2. In this case, you usually need to find out the corresponding code and upgrade `core-js` to the v3.
501
- 3. An npm package in `node_modules` imported `core-js`, but does not declare the `core-js` dependency in `dependencies`. In this case, you need to declare the `core-js` dependency in the corresponding npm package, or install a copy of `core-js` in the project root directory.
502
-
503
- ---
504
-
505
235
  ### Compilation error after referencing a type from lodash
506
236
 
507
237
  If the `@types/lodash` package is installed in your project, you may import some types from `lodash`, such as the `DebouncedFunc` type:
@@ -529,40 +259,3 @@ import type { DebouncedFunc } from 'lodash';
529
259
  :::tip
530
260
  In any case, it is recommended to use `import type` to import types, this will help the compiler to identify the type.
531
261
  :::
532
-
533
- ---
534
-
535
- ### Division in Less file doesn't work?
536
-
537
- Compared with the v3 version, the Less v4 version has some differences in the way of writing division:
538
-
539
- ```less
540
- // Less v3
541
- .math {
542
- width: 2px / 2; // 1px
543
- width: 2px ./ 2; // 1px
544
- width: (2px / 2); // 1px
545
- }
546
-
547
- // Less v4
548
- .math {
549
- width: 2px / 2; // 2px / 2
550
- width: 2px ./ 2; // 1px
551
- width: (2px / 2); // 1px
552
- }
553
- ```
554
-
555
- The built-in Less version of Modern.js is v4, and the writing method of the lower version will not take effect. Please pay attention to the distinction.
556
-
557
- The writing of division in Less can also be modified through configuration options, see [Less - Math](https://lesscss.org/usage/#less-options-math).
558
-
559
- ---
560
-
561
- ### Compile error ‘TypeError: Cannot delete property 'xxx' of #\<Object\>’
562
-
563
- This error indicates that a read-only configuration option was deleted during the compilation process. Normally, we do not want any operation to directly modify the incoming configuration when compiling, but it is difficult to restrict the behavior of underlying plugins (such as postcss-loader, etc). If this error occurs, please contact the builder developer and we will need to do something special with that configuration.
564
-
565
- The same type of error is also reported:
566
-
567
- - 'TypeError: Cannot add property xxx, object is not extensible'
568
- - 'TypeError: Cannot assign to read only property 'xxx' of object '#\<Object\>'
@@ -4,67 +4,20 @@ sidebar_position: 3
4
4
 
5
5
  # 构建相关问题
6
6
 
7
- 如果你遇到了构建相关的问题,可以参考以下文档:
8
-
9
- ### 如何配置组件库按需引入?
10
-
11
- 如果需要配置组件库的按需引入,你可以通过 [source.transformImport](/configure/app/source/transform-import.html) 配置,这个配置的能力等价于 [babel-plugin-import](https://www.npmjs.com/package/babel-plugin-import)。
12
-
13
- ```ts
14
- export default {
15
- source: {
16
- transformImport: [
17
- {
18
- libraryName: 'xxx-components',
19
- libraryDirectory: 'es',
20
- style: true,
21
- },
22
- ],
23
- },
24
- };
25
- ```
7
+ 如果你遇到了构建相关的问题,可以参考当前文档进行排查。
26
8
 
27
9
  ---
28
10
 
29
- ### 如何在编译过程中进行 ESLint 代码校验?
30
-
31
- 出于编译性能的考虑,Modern.js 默认不会在编译过程中进行 ESLint 校验,如果需要该功能,可以手动安装并注册社区中的 [eslint-webpack-plugin](https://github.com/webpack-contrib/eslint-webpack-plugin)。
32
-
33
- 注册该插件的示例代码如下:
11
+ ### Rsbuild FAQ
34
12
 
35
- ```js
36
- import ESLintPlugin from 'eslint-webpack-plugin';
13
+ Modern.js 内部基于 [Rsbuild](https://rsbuild.dev/) 封装了自身的构建工具,因此你可以直接参考 Rsbuild 的 FAQ 文档:
37
14
 
38
- export default {
39
- tools: {
40
- bundlerChain(chain) {
41
- chain.plugin('eslint-plugin').use(ESLintPlugin, [
42
- {
43
- extensions: ['.js', '.ts', '.jsx', 'tsx', '.mjs'],
44
- },
45
- ]);
46
- },
47
- },
48
- };
49
- ```
50
-
51
- > 更详细的用法请参考 [eslint-webpack-plugin](https://github.com/webpack-contrib/eslint-webpack-plugin) 文档。
15
+ - [Rsbuild - 功能类问题](https://rsbuild.dev/zh/guide/faq/features)
16
+ - [Rsbuild - 异常类问题](https://rsbuild.dev/zh/guide/faq/exceptions)
17
+ - [Rsbuild - 热更新问题](https://rsbuild.dev/zh/guide/faq/hmr)
52
18
 
53
19
  ---
54
20
 
55
- ### 如何配置静态资源的 CDN 路径?
56
-
57
- 如果需要将 JS、CSS 等静态资源上传到 CDN 使用,那么可以通过 [output.assetPrefix](/configure/app/output/asset-prefix.html) 配置来设置静态资源的 URL 前缀。
58
-
59
- ```js
60
- export default {
61
- output: {
62
- assetPrefix: 'https://cdn.example.com/assets/',
63
- },
64
- };
65
- ```
66
-
67
- ---
68
21
 
69
22
  ### 如何清空 webpack 编译缓存?
70
23
 
@@ -78,14 +31,6 @@ rm -rf ./node_modules/.cache
78
31
 
79
32
  ---
80
33
 
81
- ### 如何移除代码中的 console?
82
-
83
- 在生产环境构建时,我们可以移除代码中的 `console`,从而避免开发环境的日志被输出到生产环境。
84
-
85
- Modern.js 默认提供了移除 console 的配置项,请查看 [performance.removeConsole](/configure/app/performance/remove-console.html)。
86
-
87
- ---
88
-
89
34
  ### 如何查看最终生成的 webpack / Rspack 配置?
90
35
 
91
36
  Modern.js 提供 [inspect 命令](/apis/app/commands.html) 用于查看项目最终生成的 Modern.js 配置以及 webpack / Rspack 配置。
@@ -101,26 +46,6 @@ Inspect config succeed, open following files to view the content:
101
46
 
102
47
  ---
103
48
 
104
- ### 如何忽略特定 warning 日志?
105
-
106
- 默认情况下,Modern.js 会打印构建过程产生的所有 error 和 warning 日志。
107
-
108
- 如果遇到由于三方包产生大量 warning 日志,暂时又无法处理,希望忽略的情况。可通过 webpack / Rspack 提供的构建配置忽略特定 warning 日志。
109
-
110
- ```ts
111
- export default {
112
- tools: {
113
- bundlerChain: chain => {
114
- chain.ignoreWarnings([/Using \/ for division outside of calc()/]);
115
- },
116
- },
117
- };
118
- ```
119
-
120
- 详细信息可参考: [ignoreWarnings](https://webpack.js.org/configuration/other-options/#ignorewarnings)。
121
-
122
- ---
123
-
124
49
  ### webpack 编译出现 'compilation' argument 报错?
125
50
 
126
51
  如果编译时出现以下报错,通常是由于项目中安装了错误的 webpack 版本,或者安装了多个 webpack 版本引起:
@@ -147,14 +72,6 @@ webpack 版本问题有以下几种情况:
147
72
 
148
73
  ---
149
74
 
150
- ### 编译产物中存在未编译的 ES6+ 代码?
151
-
152
- 默认情况下,Modern.js 不会通过 `babel-loader` 或 `ts-loader` 来编译 `node_modules` 下的文件。如果项目引入的 npm 包中含有 ES6+ 语法,会被打包进产物中。
153
-
154
- 遇到这种情况时,可以通过 [source.include](/configure/app/source/include.html) 配置项来指定需要额外进行编译的目录或模块。
155
-
156
- ---
157
-
158
75
  ### 在 Monorepo 中引用其他模块,代码没有被正确编译?
159
76
 
160
77
  出于编译性能的考虑,默认情况下,Modern.js 不会编译 `node_modules` 下的文件,也不会编译当前工程目录外部的文件。
@@ -169,42 +86,6 @@ webpack 版本问题有以下几种情况:
169
86
 
170
87
  ---
171
88
 
172
- ### 编译时报错 `You may need additional loader`?
173
-
174
- 如果编译过程中遇到了以下报错提示,表示存在个别文件无法被正确编译。
175
-
176
- ```bash
177
- Module parse failed: Unexpected token
178
- File was processed with these loaders:
179
- * some-loader/index.js
180
-
181
- You may need an additional loader to handle the result of these loaders.
182
- ```
183
-
184
- 解决方法:
185
-
186
- - 如果是引用了当前工程外部的 `.ts` 文件,或者是 node_modules 下的 `.ts` 文件,请添加 [source.include](/configure/app/source/include.html) 配置项,指定需要额外进行编译的文件。
187
- - 如果是引用了 Modern.js 不支持的文件格式,请自行配置对应的 webpack loader 进行编译。
188
-
189
- ---
190
-
191
- ### 编译时报错 `Error: [object Object] is not a PostCSS plugin` ?
192
-
193
- 目前,Modern.js 使用的是 v8 版本的 PostCSS。如果编译过程中遇到了 `Error: [object Object] is not a PostCSS plugin` 报错提示,通常是由于引用到了错误的 PostCSS 版本导致,常见的如 `cssnano` 中 `postcss` (peerDependencies) 版本不符合预期。
194
-
195
- 可以通过 `npm ls postcss` 查找 `UNMET PEER DEPENDENCY` 的依赖,然后在 package.json 中通过指定 PostCSS 版本等方式安装正确的依赖版本即可。
196
-
197
- ```
198
- npm ls postcss
199
-
200
- ├─┬ css-loader@6.3.0
201
- │ └── UNMET PEER DEPENDENCY postcss@8.3.9
202
- ├─┬ css-minimizer-webpack-plugin@3.0.0
203
- │ └── UNMET PEER DEPENDENCY postcss@8.3.9
204
- ```
205
-
206
- ---
207
-
208
89
  ### 打开页面后报错,提示 exports is not defined?
209
90
 
210
91
  如果编译正常,但是打开页面后出现 `exports is not defined` 报错,通常是因为在项目中使用 Babel 编译了一个 CommonJS 模块,导致 Babel 出现异常。
@@ -242,75 +123,6 @@ Error: ES Modules may not assign module.exports or exports.*, Use ESM export syn
242
123
 
243
124
  ---
244
125
 
245
- ### 编译时报错 "export 'foo' (imported as 'foo') was not found in './utils'"?
246
-
247
- 如果编译的过程中出现此报错,说明代码中引用了一个不存在的导出。
248
-
249
- 比如以下例子,`index.ts` 中引用了 `utils.ts` 中的 `foo` 变量, 但 `utils.ts` 实际上只导出了 `bar` 变量。
250
-
251
- ```ts
252
- // utils.ts
253
- export const bar = 'bar';
254
-
255
- // index.ts
256
- import { foo } from './utils';
257
- ```
258
-
259
- 在这种情况下,Modern.js 会抛出以下错误:
260
-
261
- ```bash
262
- Compile Error:
263
- File: ./src/index.ts
264
- export 'foo' (imported as 'foo') was not found in './utils' (possible exports: bar)
265
- ```
266
-
267
- 当你遇到该问题时,首先需要检查相关代码里 import / export 的内容是否正确,并修正相关错误。
268
-
269
- 常见的错误写法有:
270
-
271
- - 引入了不存在的变量:
272
-
273
- ```ts
274
- // utils.ts
275
- export const bar = 'bar';
276
-
277
- // index.ts
278
- import { foo } from './utils';
279
- ```
280
-
281
- - re-export 了一个类型,但是没有添加 `type` 修饰符,导致 babel 等编译工具无法识别到类型导出,导致编译异常。
282
-
283
- ```ts
284
- // utils.ts
285
- export type Foo = 'bar';
286
-
287
- // index.ts
288
- export { Foo } from './utils'; // 错误写法
289
- export type { Foo } from './utils'; // 正确写法
290
- ```
291
-
292
- 在个别情况下,以上报错是由第三方依赖引入的,你无法直接修改它。此时,如果你确定该问题不影响你的应用,那么可以添加以下配置,将 `error` 日志修改为 `warn` 级别:
293
-
294
- ```ts
295
- export default {
296
- tools: {
297
- webpackChain(chain) {
298
- chain.module.parser.merge({
299
- javascript: {
300
- exportsPresence: 'warn',
301
- },
302
- });
303
- },
304
- },
305
- };
306
- ```
307
-
308
- 同时,你需要尽快联系第三方依赖的开发者来修复相应的问题。
309
-
310
- > 你可以查看 webpack 的文档来了解 [module.parser.javascript.exportsPresence](https://webpack.js.org/configuration/module/#moduleparserjavascriptexportspresence) 的更多细节。
311
-
312
- ---
313
-
314
126
  ### 编译进度条卡死,但终端无 Error 日志?
315
127
 
316
128
  当编译进度条卡死,但终端无 Error 日志时,通常是因为编译过程中出现了异常。在某些情况下,当 Error 被 webpack 或其他模块捕获后,错误日志不会被正确输出。最为常见的场景是 Babel 配置出现异常,抛出 Error 后被 webpack 捕获,而 webpack 在个别情况下吞掉了 Error。
@@ -420,92 +232,6 @@ export default {
420
232
 
421
233
  ---
422
234
 
423
- ### 打包后发现 tree shaking 没有生效?
424
-
425
- Modern.js 在生产构建时会默认开启 webpack 的 tree shaking 功能,tree shaking 是否能够生效,取决于业务代码能否满足 webpack 的 tree shaking 条件。
426
-
427
- 如果你遇到了 tree shaking 不生效的问题,可以检查下相关 npm 包的 `sideEffects` 配置是否正确,如果你不了解 `sideEffects` 的作用,或是对 tree shaking 背后的原理感兴趣,可以阅读以下两篇文档:
428
-
429
- - [webpack 官方文档 - Tree Shaking](https://webpack.docschina.org/guides/tree-shaking/)
430
- - [Tree Shaking 问题排查指南](https://bytedance.feishu.cn/docs/doccn8E1ldDct5uv1EEDQs8Ycwe)
431
-
432
- 如果你是 npm 包的开发者,可以阅读这篇文章:
433
-
434
- - [如何编写一个友好支持 Tree-shaking 的库](https://zhuanlan.zhihu.com/p/594124786)
435
-
436
- ---
437
-
438
- ### 打包时出现 JavaScript heap out of memory?
439
-
440
- 该报错表示打包过程中出现了内存溢出问题,大多数情况下是由于打包的内容较多,超出了 Node.js 默认的内存上限。
441
-
442
- 如果出现 OOM 问题,最简单的方法是通过增加内存上限来解决,Node.js 提供了 `--max-old-space-size` 选项来对此进行设置。你可以在 CLI 命令前添加 [NODE_OPTIONS](https://nodejs.org/api/cli.html#node_optionsoptions) 来设置此参数。
443
-
444
- 比如,在 `modern build` 命令前添加参数:
445
-
446
- ```diff title="package.json"
447
- {
448
- "scripts": {
449
- - "build": "modern build"
450
- + "build": "NODE_OPTIONS=--max_old_space_size=16384 modern build"
451
- }
452
- }
453
- ```
454
-
455
- 如果你执行的是其他命令,比如 `modern deploy`,请在对应的命令前添加参数。
456
-
457
- `max_old_space_size` 参数的值代表内存上限大小(MB),一般情况下设置为 `16384`(16GB)即可。
458
-
459
- Node.js 官方文档中有对以下参数更详细的解释:
460
-
461
- - [NODE_OPTIONS](https://nodejs.org/api/cli.html#node_optionsoptions)
462
- - [--max-old-space-size](https://nodejs.org/api/cli.html#--max-old-space-sizesize-in-megabytes)
463
-
464
- 除了增加内存上限,通过开启一些编译策略来提升构建效率也是一个解决方案,请参考 [提升构建性能](/guides/advanced-features/build-performance.html)。
465
-
466
- 如果以上方式无法解决你的问题,可能是项目中某些异常逻辑导致了内存非正常溢出。你可以排查近期的代码变更,定位问题的根因。如果无法定位,请联系我们进行排查。
467
-
468
- ---
469
-
470
- ### 打包时出现 Can't resolve 'core-js/modules/xxx.js'?
471
-
472
- 如果你在打包时出现了类似下面的报错,表示项目中的 [core-js](https://github.com/zloirock/core-js) 无法被正确引用。
473
-
474
- ```text
475
- Module not found: Can't resolve 'core-js/modules/es.error.cause.js'
476
- ```
477
-
478
- 通常来说,你无须在项目中安装 `core-js`,因为 Modern.js 已经内置了一份 `core-js` v3。
479
-
480
- 如果出现 `core-js` 找不到的报错,可能有以下几个原因:
481
-
482
- 1. 项目里覆盖了 Babel 配置的 `plugins`,导致内置的 `babelPluginLockCorejsVersion` 无法正确生效。这种情况将 `tools.babel` 更改为函数用法即可:
483
-
484
- ```ts
485
- // 错误用法,会覆盖 Modern.js 默认的 Babel 插件
486
- export default {
487
- tools: {
488
- babel: {
489
- plugins: ['babel-plugin-xxx'],
490
- },
491
- },
492
- };
493
-
494
- // 正确用法,在默认配置中新增一个插件,而非覆盖插件
495
- export default {
496
- tools: {
497
- babel(config) {
498
- config.plugins.push('babel-plugin-xxx');
499
- },
500
- },
501
- };
502
- ```
503
-
504
- 2. 项目里某一处代码依赖了 `core-js` v2 版本。这种情况通常需要你找出对应的代码,并升级其中的 `core-js` 到 v3 版本。
505
- 3. `node_modules` 中的某一个 npm 包引用了 `core-js`,但是没有在 `dependencies` 中声明 `core-js` 依赖。这种情况需要你在对应的 npm 包中声明 `core-js` 依赖,或者在项目根目录下安装一份 `core-js`。
506
-
507
- ---
508
-
509
235
  ### 从 lodash 中引用类型后出现编译报错?
510
236
 
511
237
  当你的项目中安装了 `@types/lodash` 包时,你可能会从 `lodash` 中引用一些类型,比如引用 `DebouncedFunc` 类型:
@@ -536,37 +262,22 @@ import type { DebouncedFunc } from 'lodash';
536
262
 
537
263
  ---
538
264
 
539
- ### Less 文件中的除法不生效?
540
-
541
- Less v4 版本与 v3 版本相比,除法的写法有一些区别:
265
+ ### 升级 Modern.js 版本后,检查出新的 TypeScript 类型错误?
542
266
 
543
- ```less
544
- // Less v3
545
- .math {
546
- width: 2px / 2; // 1px
547
- width: 2px ./ 2; // 1px
548
- width: (2px / 2); // 1px
549
- }
267
+ 从 MAJOR_VERSION.47.0 版本开始,Modern.js 优化了 Type Checker 的检查范围。在之前的版本中,Type Checker 只输出 src 目录的类型错误,导致其他目录的类型错误无法被正确输出。
550
268
 
551
- // Less v4
552
- .math {
553
- width: 2px / 2; // 2px / 2
554
- width: 2px ./ 2; // 1px
555
- width: (2px / 2); // 1px
556
- }
557
- ```
558
-
559
- Modern.js 内置的 Less 版本为 v4,低版本的写法不会生效,请注意区分。
560
-
561
- Less 中除法的写法也可以通过配置项来修改,详见 [Less - Math](https://lesscss.org/usage/#less-options-math)。
562
-
563
- ---
269
+ 在新版本中,Modern.js Type Checker 对齐了原生 tsc 的类型检查范围(即 tsconfig.json 的 `include` 和 `exclude` 字段定义的范围),能够完整输出项目中的类型错误。
564
270
 
565
- ### 修改配置后,报错 ‘TypeError: Cannot delete property 'xxx' of #\<Object\>’
271
+ 如果你希望保持之前的行为,只输出 src 目录的类型错误,可以添加以下配置:
566
272
 
567
- 该报错表示在编译过程中对一个只读配置项进行了删除操作。通常情况下,我们不希望编译过程中的任何操作会直接对传入的配置进行修改,但难以限制底层插件(如 postcss-loader 等)的行为,如果出现该报错,请联系 Modern.js 开发者,我们需要对该配置进行单独处理。
568
-
569
- 同类型报错还有:
570
-
571
- - 'TypeError: Cannot add property xxx, object is not extensible'
572
- - 'TypeError: Cannot assign to read only property 'xxx' of object '#\<Object\>'
273
+ ```ts title="modern.config.ts"
274
+ export default {
275
+ tools: {
276
+ tsChecker: {
277
+ issue: {
278
+ include: [{ file: '**/src/**/*' }],
279
+ },
280
+ },
281
+ },
282
+ };
283
+ ```
package/package.json CHANGED
@@ -15,17 +15,17 @@
15
15
  "modern",
16
16
  "modern.js"
17
17
  ],
18
- "version": "2.48.2",
18
+ "version": "2.48.3",
19
19
  "publishConfig": {
20
20
  "registry": "https://registry.npmjs.org/",
21
21
  "access": "public",
22
22
  "provenance": true
23
23
  },
24
24
  "dependencies": {
25
- "@modern-js/sandpack-react": "2.48.2"
25
+ "@modern-js/sandpack-react": "2.48.3"
26
26
  },
27
27
  "peerDependencies": {
28
- "@modern-js/builder-doc": "^2.48.2"
28
+ "@modern-js/builder-doc": "^2.48.3"
29
29
  },
30
30
  "devDependencies": {
31
31
  "classnames": "^2",
@@ -39,8 +39,8 @@
39
39
  "@rspress/shared": "1.15.0",
40
40
  "@types/node": "^16",
41
41
  "@types/fs-extra": "9.0.13",
42
- "@modern-js/builder-doc": "2.48.2",
43
- "@modern-js/doc-plugin-auto-sidebar": "2.48.2"
42
+ "@modern-js/builder-doc": "2.48.3",
43
+ "@modern-js/doc-plugin-auto-sidebar": "2.48.3"
44
44
  },
45
45
  "scripts": {
46
46
  "dev": "rspress dev",