@modern-js/main-doc 3.9.2 → 3.10.0

package/docs/en/configure/app/bff/cross-project.mdx

@@ -7,7 +7,7 @@ title: crossProject
 - **Type:** `boolean`
 - **Default:** `false`
 
-import EnableBFFCaution from "@site-docs-en/components/enable-bff-caution";
+import EnableBFFCaution from '@site-docs-en/components/enable-bff-caution';
 
 <EnableBFFCaution />
 
@@ -21,4 +21,4 @@ export default defineConfig({
 });
 ```
 
-For detailed configuration and usage of BFF cross-project invocation, please refer to the [BFF Cross-Project Invocation Guide](/guides/advanced-features/bff/cross-project.html).
+For detailed configuration and usage of BFF cross-project invocation, please refer to the [BFF Cross-Project Invocation Guide](/guides/advanced-features/bff/cross-project.html).

package/docs/en/configure/app/bff/prefix.mdx

@@ -7,7 +7,7 @@ title: prefix
 - **Type:** `string`
 - **Default:** `/api`
 
-import EnableBFFCaution from "@site-docs-en/components/enable-bff-caution";
+import EnableBFFCaution from '@site-docs-en/components/enable-bff-caution';
 
 <EnableBFFCaution />
 

package/docs/en/configure/app/dev/lazy-compilation.mdx

@@ -33,10 +33,26 @@ type LazyCompilationOptions =
     };
 ```
 
-- **Default:** `false`
+- **Default:** depends on how the application renders:
+  - Pure CSR and streaming SSR applications: `{ imports: true, entries: false }`, which compiles dynamic imports on demand;
+  - Applications using string SSR (including any entry in `server.ssrByEntries` using string SSR), RSC or SSG: `false`.
 
 Enable lazy compilation (compilation on demand), implemented based on Rspack's [lazy compilation](https://rspack.rs/guide/features/lazy-compilation) feature.
 
+This option only takes effect in the dev server and does not affect production build output. When enabled for streaming SSR applications, route components are still compiled eagerly so that first-screen JS/CSS injection stays correct.
+
+An explicitly configured `dev.lazyCompilation` always takes precedence over the default. To disable it:
+
+```ts
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  dev: {
+    lazyCompilation: false,
+  },
+});
+```
+
 import RsbuildLink from '@site/src/components/RsbuildLink';
 
 :::info

package/docs/en/configure/app/dev/start-url.mdx

@@ -50,4 +50,3 @@ On MacOS, you can open the specified browser when Dev Server starts, by set envi
 - Brave Browser
 - Vivaldi
 - Chromium
-

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

@@ -17,11 +17,7 @@ type CssModules = {
         resourceFragment: string,
       ) => boolean);
   exportLocalsConvention?:
-    | 'asIs'
-    | 'camelCase'
-    | 'camelCaseOnly'
-    | 'dashes'
-    | 'dashesOnly';
+    'asIs' | 'camelCase' | 'camelCaseOnly' | 'dashes' | 'dashesOnly';
   exportGlobals?: boolean;
   localIdentName?: string;
   mode?:

package/docs/en/configure/app/output/disable-svgr.mdx

@@ -7,6 +7,10 @@ title: disableSvgr
 - **Type:** `boolean`
 - **Default:** `false`
 
+:::warning Deprecated
+`output.disableSvgr` is deprecated and will be removed in the next major version. Replace `output.disableSvgr: true` with [tools.svgr](/configure/app/tools/svgr) set to `false`; `output.disableSvgr: false` is the default behavior and can simply be removed. When both are set, `tools.svgr` wins.
+:::
+
 Whether to transform SVGs into React components. If true, will treat all .svg files as assets.
 
 By default, when an SVG resource is referenced in a JS file, Modern.js will call SVGR to convert the SVG into a React component. If you are sure that all SVG resources in your project are not being used as React components, you can turn off this conversion by setting `disableSvgr` to true to improve build performance.

package/docs/en/configure/app/output/dist-path.mdx

@@ -4,7 +4,6 @@ title: distPath
 
 # output.distPath
 
-
 import CommentTips from '@site-docs/components/output-distpath-warning';
 
 <CommentTips />

package/docs/en/configure/app/output/inline-scripts.mdx

@@ -8,8 +8,7 @@ title: inlineScripts
 
 ```ts
 type InlineScriptsTest =
-  | RegExp
-  | ((params: { size: number; name: string }) => boolean);
+  RegExp | ((params: { size: number; name: string }) => boolean);
 
 type InlineScripts =
   | boolean

package/docs/en/configure/app/output/inline-styles.mdx

@@ -8,8 +8,7 @@ title: inlineStyles
 
 ```ts
 type InlineStylesTest =
-  | RegExp
-  | ((params: { size: number; name: string }) => boolean);
+  RegExp | ((params: { size: number; name: string }) => boolean);
 
 type InlineStyles =
   | boolean

package/docs/en/configure/app/output/split-route-chunks.mdx

@@ -16,5 +16,5 @@ export default {
   output: {
     splitRouteChunks: false,
   },
-}
+};
 ```

package/docs/en/configure/app/output/ssg.mdx

@@ -20,6 +20,7 @@ The SSG feature is closely related to routing. It is recommended to understand t
 :::
 
 :::info
+
 - Use `output.ssg` for single-entry apps.
 - For multi-entry apps, prefer `output.ssgByEntries`.
 - If `output.ssg` is `true` and `output.ssgByEntries` is not set, all routes under all entries are treated as SSG routes.
@@ -82,4 +83,3 @@ export default defineConfig({
   },
 });
 ```
-

package/docs/en/configure/app/output/ssgByEntries.mdx

@@ -10,6 +10,7 @@ title: ssgByEntries
 Configure SSG per entry for multi-entry applications.
 
 :::info
+
 - Use `output.ssg` for single-entry apps.
 - For multi-entry apps, prefer `output.ssgByEntries`.
 - If `output.ssg` is `true` and `output.ssgByEntries` is not set, all routes under all entries are treated as SSG routes.

package/docs/en/configure/app/output/svg-default-export.mdx

@@ -7,6 +7,10 @@ title: svgDefaultExport
 - **Type:** `'url' | 'component'`
 - **Default:** `'url'`
 
+:::warning Deprecated
+`output.svgDefaultExport` is deprecated and will be removed in the next major version. Use `svgrOptions.exportType` of [tools.svgr](/configure/app/tools/svgr) instead: `'component'` maps to `exportType: 'default'`, `'url'` maps to `exportType: 'named'`. When both are set, `tools.svgr` wins.
+:::
+
 `output.svgDefaultExport` is used to configure the default export type of SVG files.
 
 When `output.svgDefaultExport` is set to `url` , the default export of SVG files is the URL of the file. For example:

package/docs/en/configure/app/performance/chunk-split.mdx

@@ -14,10 +14,7 @@ type ForceSplitting = RegExp[] | Record<string, RegExp>;
 
 interface BaseChunkSplit {
   strategy?:
-    | 'split-by-module'
-    | 'split-by-experience'
-    | 'all-in-one'
-    | 'single-vendor';
+    'split-by-module' | 'split-by-experience' | 'all-in-one' | 'single-vendor';
   override?: SplitChunks;
   forceSplitting?: ForceSplitting;
 }

package/docs/en/configure/app/runtime/plugins.mdx

@@ -50,9 +50,11 @@ import { defineRuntimeConfig } from '@modern-js/runtime';
 import { myPlugin } from './config/plugin/myPlugin';
 
 export default defineRuntimeConfig({
-  plugins: [myPlugin({
-    foo: 1,
-    bar: 2,
-  })],
+  plugins: [
+    myPlugin({
+      foo: 1,
+      bar: 2,
+    }),
+  ],
 });
 ```

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

@@ -21,10 +21,10 @@ export default defineConfig({
 
 :::tip Prerequisites
 Before enabling RSC, ensure:
+
 1. React and React DOM are upgraded to version 19 (recommended 19.2.4 or above)
 2. Install the `react-server-dom-rspack@0.0.2` dependency
 
 :::
 
 For more information about using RSC, see the [React Server Components guide](/guides/basic-features/render/rsc).
-

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

@@ -25,13 +25,12 @@ export default defineConfig({
 
 When the value type is `Object`, the following properties can be configured:
 
-| Name              | Type                                                         | Default                                   | Description                                                                     |
-| ---------------- | ------------------------------------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------- |
-| mode             | `string`                                  | `stream`          | which defaults to using streaming rendering. Configure `string` to use `renderToString` for rendering       |
-| forceCSR         | `boolean`                                 | `false`           | which is off by default for forcing CSR rendering. Configure `true` to force CSR by adding `?csr=true` or adding `x-modern-ssr-fallback` header when accessing the page |
-| unsafeHeaders    | `string[]`                                | `[]`              | For safety reasons, Modern.js does not add excessive content to SSR_DATA. Developers can use this configuration to specify the headers that need to be injected      |
-| loaderFailureMode| `clientRender \| errorBoundary`           | `errorBoundary`   | The default configuration is `'errorBoundary'`, when an error occurs in [data loader](/en/guides/basic-features/data/data-fetch.html#data-loader-recommended), it will default to rendering the [`Error`](/guides/basic-features/routes/routes#error-handling) component of the route. When configured as `'clientRender'`, if a loader throws an error, it switch to client-side rendering，you can use it with [Client Loader](/en/guides/basic-features/data/data-fetch.html#client-loader) |
-
+| Name              | Type                            | Default         | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| ----------------- | ------------------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| mode              | `string`                        | `stream`        | which defaults to using streaming rendering. Configure `string` to use `renderToString` for rendering                                                                                                                                                                                                                                                                                                                                                                                          |
+| forceCSR          | `boolean`                       | `false`         | which is off by default for forcing CSR rendering. Configure `true` to force CSR by adding `?csr=true` or adding `x-modern-ssr-fallback` header when accessing the page                                                                                                                                                                                                                                                                                                                        |
+| unsafeHeaders     | `string[]`                      | `[]`            | For safety reasons, Modern.js does not add excessive content to SSR_DATA. Developers can use this configuration to specify the headers that need to be injected                                                                                                                                                                                                                                                                                                                                |
+| loaderFailureMode | `clientRender \| errorBoundary` | `errorBoundary` | The default configuration is `'errorBoundary'`, when an error occurs in [data loader](/en/guides/basic-features/data/data-fetch.html#data-loader-recommended), it will default to rendering the [`Error`](/guides/basic-features/routes/routes#error-handling) component of the route. When configured as `'clientRender'`, if a loader throws an error, it switch to client-side rendering，you can use it with [Client Loader](/en/guides/basic-features/data/data-fetch.html#client-loader) |
 
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -39,7 +38,7 @@ export default defineConfig({
     ssr: {
       forceCSR: true,
       mode: 'stream',
-      unsafeHeaders: ['User-Agent']
+      unsafeHeaders: ['User-Agent'],
     },
   },
 });

package/docs/en/configure/app/server/tsconfig-path.mdx

@@ -40,9 +40,9 @@ Add `<appDirectory>/tsconfig.server.json`:
     "types": ["node"],
     "esModuleInterop": true,
     "experimentalDecorators": true,
-    "emitDecoratorMetadata": true
+    "emitDecoratorMetadata": true,
   },
-  "include": ["api", "shared", "server", "config", "modern.config.ts"]
+  "include": ["api", "shared", "server", "config", "modern.config.ts"],
 }
 ```
 

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

@@ -9,49 +9,78 @@ title: less
 
 ```js
 const defaultOptions = {
-  lessOptions: {
-    javascriptEnabled: true,
+  lessLoaderOptions: {
+    lessOptions: {
+      javascriptEnabled: true,
+    },
+    // CSS Source Map enabled by default in development environment
+    sourceMap: isDev,
   },
-  // CSS Source Map enabled by default in development environment
-  sourceMap: isDev,
 };
 ```
 
-You can modify the config of [less-loader](https://github.com/webpack-contrib/less-loader) via `tools.less`.
+`tools.less` modifies the options of [@rsbuild/plugin-less](https://rsbuild.rs/plugins/list/plugin-less). It accepts the full plugin options:
+
+| Option              | Description                                                                                         |
+| ------------------- | --------------------------------------------------------------------------------------------------- |
+| `lessLoaderOptions` | Options passed to [less-loader](https://github.com/webpack-contrib/less-loader), object or function |
+| `include`           | Files handled by less-loader, defaults to `/\.less$/`                                               |
+| `exclude`           | Files that less-loader should skip                                                                  |
+| `parallel`          | Whether to compile Less modules in worker threads, defaults to `false`                              |
+
+### Modifying less-loader options
 
-### Object Type
+When `lessLoaderOptions` is an `Object`, it is merged with the default config through Object.assign in a shallow way. It should be noted that `lessOptions` is merged through deepMerge in a deep way. For example:
+
+```js
+export default {
+  tools: {
+    less: {
+      lessLoaderOptions: {
+        lessOptions: {
+          javascriptEnabled: false,
+        },
+      },
+    },
+  },
+};
+```
 
-When `tools.less` is configured as `Object` type, it is merged with the default config through Object.assign in a shallow way. It should be noted that `lessOptions` is merged through deepMerge in a deep way. For example:
+When `lessLoaderOptions` is a `Function`, the default config is passed as the first parameter, which can be directly modified or returned as the final result. The second parameter provides some utility functions that can be called directly. For example:
 
 ```js
 export default {
   tools: {
     less: {
-      lessOptions: {
-        javascriptEnabled: false,
+      lessLoaderOptions(config) {
+        // Modify the config of lessOptions
+        config.lessOptions = {
+          javascriptEnabled: false,
+        };
       },
     },
   },
 };
 ```
 
-### Function Type
+### Parallel compilation
 
-When `tools.less` is a Function, the default config is passed as the first parameter, which can be directly modified or returned as the final result. The second parameter provides some utility functions that can be called directly. For example:
+Less compilation is pure JavaScript and runs on the Node.js main thread by default. With `parallel` enabled, Less modules are compiled in a pool of worker threads, which shortens the build when a project has many Less files.
 
 ```js
 export default {
   tools: {
-    less(config) {
-      // Modify the config of lessOptions
-      config.lessOptions = {
-        javascriptEnabled: false,
-      };
+    less: {
+      parallel: true,
     },
   },
 };
 ```
 
+:::tip
+Options sent to worker threads must satisfy the [structured clone algorithm](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm). With `parallel` enabled, `lessLoaderOptions` therefore cannot contain functions, such as an `additionalData` function or a custom `implementation`.
+:::
+
 ### Modifying Less Version
 
 In some scenarios, if you need to use a specific version of Less instead of the built-in Less v4 in Modern.js, you can install the desired Less version in your project and set it up using the `implementation` option of the `less-loader`.
@@ -60,7 +89,9 @@ In some scenarios, if you need to use a specific version of Less instead of the
 export default {
   tools: {
     less: {
-      implementation: require('less'),
+      lessLoaderOptions: {
+        implementation: require('less'),
+      },
     },
   },
 };
@@ -77,8 +108,52 @@ Used to specify which files `less-loader` does not compile, You can pass in one
 ```js
 export default {
   tools: {
-    less(config, { addExcludes }) {
-      addExcludes(/node_modules/);
+    less: {
+      lessLoaderOptions(config, { addExcludes }) {
+        addExcludes(/node_modules/);
+      },
+    },
+  },
+};
+```
+
+The plugin's `exclude` option is the recommended equivalent:
+
+```js
+export default {
+  tools: {
+    less: {
+      exclude: /node_modules/,
+    },
+  },
+};
+```
+
+### Legacy form
+
+:::warning Do not mix the two layers
+As soon as an object contains a plugin-level key (`lessLoaderOptions`, `include`, `exclude`, ...), the whole object is parsed as plugin options and any loader option in it has no effect. For example, `lessOptions` in `tools.less: { parallel: true, lessOptions: { ... } }` is ignored and must be moved under `lessLoaderOptions`; a hint is printed in development.
+:::
+
+In earlier versions, `tools.less` took the less-loader options directly, e.g. `tools.less: { lessOptions: {} }` or `tools.less(config, { addExcludes }) {}`. This form still works: Modern.js wraps it into `lessLoaderOptions` and produces exactly the same config as before. A migration hint is printed in development, and the legacy form will be removed in the next major version.
+
+```js
+// legacy
+export default {
+  tools: {
+    less: {
+      lessOptions: { javascriptEnabled: false },
+    },
+  },
+};
+
+// current
+export default {
+  tools: {
+    less: {
+      lessLoaderOptions: {
+        lessOptions: { javascriptEnabled: false },
+      },
     },
   },
 };

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

@@ -9,41 +9,64 @@ title: sass
 
 ```js
 const defaultOptions = {
-  // CSS Source Map enabled by default in development environment
-  sourceMap: isDev,
+  sassLoaderOptions: {
+    // CSS Source Map enabled by default in development environment
+    sourceMap: isDev,
+  },
 };
 ```
 
-You can modify the config of [sass-loader](https://github.com/webpack-contrib/sass-loader) via `tools.sass`.
+`tools.sass` modifies the options of [@rsbuild/plugin-sass](https://rsbuild.rs/plugins/list/plugin-sass). It accepts the full plugin options:
 
-### Object Type
+| Option              | Description                                                                                         |
+| ------------------- | --------------------------------------------------------------------------------------------------- |
+| `sassLoaderOptions` | Options passed to [sass-loader](https://github.com/webpack-contrib/sass-loader), object or function |
+| `include`           | Files handled by sass-loader, defaults to `/\.s(?:a\|c)ss$/`                                        |
+| `exclude`           | Files that sass-loader should skip                                                                  |
+| `rewriteUrls`       | Whether to rewrite relative URLs in Sass files with resolve-url-loader, defaults to `true`          |
 
-When `tools.sass` is `Object` type, it is merged with the default config through Object.assign. It should be noted that `sassOptions` is merged through deepMerge in a deep way.
+### Modifying sass-loader options
 
-For example:
+When `sassLoaderOptions` is an `Object`, it is merged with the default config through Object.assign in a shallow way. It should be noted that `sassOptions` is merged through deepMerge in a deep way. For example:
 
 ```js
 export default {
   tools: {
     sass: {
-      sourceMap: true,
+      sassLoaderOptions: {
+        sourceMap: true,
+      },
+    },
+  },
+};
+```
+
+When `sassLoaderOptions` is a `Function`, the default config is passed as the first parameter, which can be directly modified or returned as the final result. The second parameter provides some utility functions that can be called directly. For example:
+
+```js
+export default {
+  tools: {
+    sass: {
+      sassLoaderOptions(config) {
+        // Modify the additionalData config
+        config.additionalData = async (content, loaderContext) => {
+          // ...
+        };
+      },
     },
   },
 };
 ```
 
-### Function Type
+### Disabling URL rewriting
 
-When `tools.sass` is a Function, the default config is passed as the first parameter, which can be directly modified or returned as the final result. The second parameter provides some utility functions that can be called directly. For Example:
+By default, relative URLs in Sass files are rewritten by resolve-url-loader so that they resolve relative to the source file. If your project does not rely on this, turn it off to drop one loader from the chain:
 
 ```js
 export default {
   tools: {
-    sass(config) {
-      // Modify sourceMap config
-      config.additionalData = async (content, loaderContext) => {
-        // ...
-      };
+    sass: {
+      rewriteUrls: false,
     },
   },
 };
@@ -57,13 +80,15 @@ In some scenarios, if you need to use a specific version of Sass instead of the
 export default {
   tools: {
     sass: {
-      implementation: require('sass'),
+      sassLoaderOptions: {
+        implementation: require('sass'),
+      },
     },
   },
 };
 ```
 
-### Utility Function
+### Util Function
 
 #### addExcludes
 
@@ -74,8 +99,52 @@ Used to specify which files `sass-loader` does not compile, You can pass in one
 ```js
 export default {
   tools: {
-    sass(config, { addExcludes }) {
-      addExcludes(/node_modules/);
+    sass: {
+      sassLoaderOptions(config, { addExcludes }) {
+        addExcludes(/node_modules/);
+      },
+    },
+  },
+};
+```
+
+The plugin's `exclude` option is the recommended equivalent:
+
+```js
+export default {
+  tools: {
+    sass: {
+      exclude: /node_modules/,
+    },
+  },
+};
+```
+
+### Legacy form
+
+:::warning Do not mix the two layers
+As soon as an object contains a plugin-level key (`sassLoaderOptions`, `include`, `exclude`, ...), the whole object is parsed as plugin options and any loader option in it has no effect. For example, `sassOptions` in `tools.sass: { rewriteUrls: false, sassOptions: { ... } }` is ignored and must be moved under `sassLoaderOptions`; a hint is printed in development.
+:::
+
+In earlier versions, `tools.sass` took the sass-loader options directly, e.g. `tools.sass: { sassOptions: {} }` or `tools.sass(config, { addExcludes }) {}`. This form still works: Modern.js wraps it into `sassLoaderOptions` and produces exactly the same config as before. A migration hint is printed in development, and the legacy form will be removed in the next major version.
+
+```js
+// legacy
+export default {
+  tools: {
+    sass: {
+      sourceMap: true,
+    },
+  },
+};
+
+// current
+export default {
+  tools: {
+    sass: {
+      sassLoaderOptions: {
+        sourceMap: true,
+      },
     },
   },
 };

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

@@ -0,0 +1,93 @@
+---
+title: svgr
+---
+
+# tools.svgr
+
+- **Type:** `Object | Function | false`
+- **Default:**
+
+```js
+const defaultOptions = {
+  mixedImport: true,
+  svgrOptions: {
+    exportType: 'named',
+  },
+};
+```
+
+`tools.svgr` modifies the options of [@rsbuild/plugin-svgr](https://rsbuild.rs/plugins/list/plugin-svgr). It accepts the full plugin options. Set it to `false` to skip registering the SVGR plugin; all `.svg` files are then treated as static assets.
+
+| Option            | Description                                                                                                |
+| ----------------- | ---------------------------------------------------------------------------------------------------------- |
+| `svgrOptions`     | Options passed to [SVGR](https://react-svgr.com/docs/options/), such as `exportType`, `icon`, `svgoConfig` |
+| `parallel`        | Whether to transform SVG files in worker threads, defaults to `false`                                      |
+| `exclude`         | SVG files that SVGR should skip                                                                            |
+| `excludeImporter` | Importer files whose SVG imports should skip SVGR                                                          |
+| `query`           | Query that triggers the SVGR transform, defaults to `/react/`                                              |
+| `mixedImport`     | Whether a module may import both the URL and the React component, defaults to `true`                       |
+
+### Merge rules
+
+When `tools.svgr` is an `Object`, its top-level fields are merged with the defaults through Object.assign in a shallow way, and `svgrOptions` is merged one level deeper, so setting only `svgrOptions.icon` keeps the default `exportType`.
+
+When `tools.svgr` is a `Function`, the default config is passed as the first parameter, which can be directly modified or returned as the final result. An array of objects and functions is also accepted and applied in order.
+
+### Parallel transform
+
+The SVGR transform is pure JavaScript and runs on the Node.js main thread by default. With many SVG files, enable `parallel` to move the transform into a pool of worker threads:
+
+```js
+export default {
+  tools: {
+    svgr: {
+      parallel: true,
+    },
+  },
+};
+```
+
+:::tip
+Options sent to worker threads must satisfy the [structured clone algorithm](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm). With `parallel` enabled, `svgrOptions` therefore cannot contain functions.
+:::
+
+### Changing the default export
+
+`svgrOptions.exportType` controls what an SVG file exports by default: `'named'` exports the file URL by default and the React component as the named export `ReactComponent`; `'default'` exports the React component by default.
+
+```js
+export default {
+  tools: {
+    svgr: {
+      svgrOptions: {
+        exportType: 'default',
+      },
+    },
+  },
+};
+```
+
+### Disabling SVGR
+
+If you are sure that no SVG asset in your project is used as a React component, disable SVGR to improve build performance:
+
+```js
+export default {
+  tools: {
+    svgr: false,
+  },
+};
+```
+
+### Relation to the legacy options
+
+`tools.svgr` replaces the two deprecated options below. They still work today and will be removed in the next major version:
+
+| Legacy option                          | Replacement                                              |
+| -------------------------------------- | -------------------------------------------------------- |
+| `output.svgDefaultExport: 'component'` | `tools.svgr: { svgrOptions: { exportType: 'default' } }` |
+| `output.svgDefaultExport: 'url'`       | `tools.svgr: { svgrOptions: { exportType: 'named' } }`   |
+| `output.disableSvgr: true`             | `tools.svgr: false`                                      |
+| `output.disableSvgr: false`            | Default behavior, just remove it                         |
+
+When both are set, `tools.svgr` wins: once `tools.svgr` is set explicitly, `output.disableSvgr` no longer applies, and `tools.svgr.svgrOptions.exportType` overrides the value derived from `output.svgDefaultExport`.