@bleedingdev/modern-js-app-tools 3.5.0-ultramodern.99 → 3.8.1-ultramodern.2

package/docs/configure/app/server/ssr.md

@@ -0,0 +1,80 @@
+# server.ssr
+
+- **Type:** `boolean` | `Object`
+- **Default:** `false`
+
+Enable SSR configuration.
+
+### Boolean Type
+
+When the value type is `boolean`, it indicates whether to enable SSR deployment mode. The default is `false` to disable it.
+
+```ts title="modern.config.ts"
+export default defineConfig({
+  server: {
+    ssr: true,
+  },
+});
+```
+
+### Object Type
+
+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](/guides/basic-features/data/data-fetch.md#data-loader-recommended), it will default to rendering the [`Error`](/guides/basic-features/routes/routes.md#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](/guides/basic-features/data/data-fetch.md#client-loader) |
+| moduleFederationAppSSR | `boolean`                       | `false`         | Enables app-level Module Federation SSR contract handshake. Enable this in both host and remote apps when using app-level MF SSR                                                                                                                                                                                                                                                                                                                                                       |
+
+```ts title="modern.config.ts"
+export default defineConfig({
+  server: {
+    ssr: {
+      forceCSR: true,
+      mode: 'stream',
+      unsafeHeaders: ['User-Agent'],
+      moduleFederationAppSSR: true,
+    },
+  },
+});
+```
+
+### Active Fallback
+
+In a production environment, there are scenarios where it is necessary to actively fallback an SSR project to CSR. Examples include
+
+1. When the SSR fails, a fallback to the CSR is required to ensure product availability.
+
+2. When the SSR is working normally, but there are rendering failures during csr, debugging is required.
+
+3. When the SSR server is under heavy load, it may be necessary to fallback some traffic directly to the CSR to avoid service downtime.
+
+By configuring `server.ssr.forceCSR` to `true` in the project, you can control this behavior through query strings or request headers.
+
+For example, in a custom Web Server middleware, you can actively fallback when traffic exceeds a certain threshold:
+
+```ts title="server/modern.server.ts"
+import {
+  defineServerConfig,
+  type MiddlewareHandler,
+} from '@modern-js/server-runtime';
+
+export const handler: MiddlewareHandler = async (c, next) => {
+  if (condition) {
+    c.set('forceCSR', '1');
+  }
+  await next();
+};
+
+export default defineServerConfig({
+  middlewares: [
+    {
+      name: 'request-middleware',
+      handler,
+    },
+  ],
+});
+```

package/docs/configure/app/server/{tsconfig-path.mdx → tsconfig-path.md}

@@ -1,7 +1,3 @@
----
-title: tsconfigPath
----
-
 # server.tsconfigPath
 
 - **Type:** `string`

package/docs/configure/app/source/{alias-strategy.mdx → alias-strategy.md}

@@ -1,11 +1,7 @@
----
-title: aliasStrategy
----
-
 # source.aliasStrategy
 
 :::warning Deprecation Warning
-`source.aliasStrategy` is deprecated, please use [resolve.aliasStrategy](/configure/app/resolve/alias-strategy) instead.
+`source.aliasStrategy` is deprecated, please use [resolve.aliasStrategy](/configure/app/resolve/alias-strategy.md) instead.
 :::
 
 - **Type:** `'prefer-tsconfig' | 'prefer-alias'`
@@ -13,6 +9,6 @@ title: aliasStrategy
 
 `source.aliasStrategy` is used to control the priority between the `paths` option in `tsconfig.json` and the `alias` option in the bundler.
 
-import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
-
-<RsbuildConfig configName="source.aliasStrategy" />
+:::info
+The usage of this configuration item is exactly the same as that of Rsbuild. For detailed information, please refer to [Rsbuild - source.aliasStrategy](https://v2.rsbuild.dev/config/source/alias-strategy).
+:::

package/docs/configure/app/source/{alias.mdx → alias.md}

@@ -1,11 +1,7 @@
----
-title: alias
----
-
 # source.alias
 
 :::warning Deprecation Warning
-`source.alias` is deprecated, please use [resolve.alias](/configure/app/resolve/alias) instead.
+`source.alias` is deprecated, please use [resolve.alias](/configure/app/resolve/alias.md) instead.
 :::
 
 - **Type:**
@@ -22,6 +18,6 @@ Create aliases to import or require certain modules, same as the [resolve.alias]
 For TypeScript projects, you only need to configure [compilerOptions.paths](https://www.typescriptlang.org/tsconfig#paths) in the `tsconfig.json` file. The Rsbuild will automatically recognize it, so there is no need to configure the `source.alias` option separately. For more details, please refer to [Path Aliases](https://modernjs.dev/en/guides/basic-features/alias.html).
 :::
 
-import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
-
-<RsbuildConfig configName="source.alias" />
+:::info
+The usage of this configuration item is exactly the same as that of Rsbuild. For detailed information, please refer to [Rsbuild - source.alias](https://v2.rsbuild.dev/config/source/alias).
+:::

package/docs/configure/app/source/{config-dir.mdx → config-dir.md}

@@ -1,13 +1,9 @@
----
-title: configDir
----
-
 # source.configDir
 
 - **Type:** `string`
 - **Default:** `'./config'`
 
-Modern.js supports placing some files in the `./config` folder to customize HTML templates, icons, static assets, etc. For details, please refer to [File Convention](/apis/app/hooks/config/html).
+Modern.js supports placing some files in the `./config` folder to customize HTML templates, icons, static assets, etc. For details, please refer to [File Convention](/apis/app/hooks/config/html.md).
 
 This option allows you to customize the directory of the configuration files.
 

package/docs/configure/app/source/{decorators.mdx → decorators.md}

@@ -1,7 +1,3 @@
----
-title: decorators
----
-
 # source.decorators
 
 - **Type:**

package/docs/configure/app/source/{define.mdx → define.md}

@@ -1,7 +1,3 @@
----
-title: define
----
-
 # source.define
 
 - **Type:** `Record<string, unknown>`
@@ -15,6 +11,6 @@ const defaultDefine = {
 
 Replaces variables in your code with other values or expressions at compile time. This can be useful for allowing different behavior between development builds and production builds.
 
-import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
-
-<RsbuildConfig configName="source.define" />
+:::info
+The usage of this configuration item is exactly the same as that of Rsbuild. For detailed information, please refer to [Rsbuild - source.define](https://v2.rsbuild.dev/config/source/define).
+:::

package/docs/configure/app/source/{disable-default-entries.mdx → disable-default-entries.md}

@@ -1,7 +1,3 @@
----
-title: disableDefaultEntries
----
-
 # source.disableDefaultEntries
 
 - **Type:** `boolean`
@@ -10,7 +6,7 @@ title: disableDefaultEntries
 Used to disable the functionality of automatically identifying page entry points based on directory structure.
 
 :::info
-By default, Modern.js automatically determines the entry points of pages based on directory conventions, as described in [Entries](/guides/concept/entries).
+By default, Modern.js automatically determines the entry points of pages based on directory conventions, as described in [Entries](/guides/concept/entries.md).
 
 :::
 
@@ -24,7 +20,7 @@ export default defineConfig({
 });
 ```
 
-After disabling the default behavior, you will need to use the [`source.entries`](/configure/app/source/entries) configuration to define custom entry points.
+After disabling the default behavior, you will need to use the [`source.entries`](/configure/app/source/entries.md) configuration to define custom entry points.
 
 :::warning
 We recommend organizing your code using the directory conventions provided by Modern.js to make better use of the framework's functionality and to avoid some redundant configurations.

package/docs/{components/module-federation.mdx → configure/app/source/enable-async-entry.md}

@@ -1,3 +1,14 @@
+# source.enableAsyncEntry
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+This option is used for Rspack Module Federation scenario.
+
+When this option is enabled, Modern.js will wrap the automatically generated entry files with dynamic import (Asynchronous Boundaries), allowing page code to consume remote modules generated by Module Federation.
+
+## Background
+
 Module Federation (MF) is a technology solution that allows multiple JavaScript applications to share code and resources. Similar to microservices architecture on the server side, it allows you to split large applications into multiple independent smaller applications that can be developed, tested, and deployed independently, while dynamically loading modules from other applications at runtime.
 
 Module Federation solves the problem of code duplication across multiple frontend applications. In the traditional approach, if multiple applications need to use the same components or utility functions, you would need to duplicate this code in each application, leading to code duplication, high maintenance costs, and larger application sizes. With Module Federation, you can place common code in one application and have other applications load it dynamically as needed, enabling code sharing and reducing duplication.
@@ -5,3 +16,39 @@ Module Federation solves the problem of code duplication across multiple fronten
 Module Federation 2.0 supports [Rspack](https://rspack.rs/) build tools, and provides enhanced features such as dynamic type hints, Manifest, Federation Runtime, runtime plugin system, and Chrome Devtools support for better development experience and debugging capabilities. You can visit the [Module Federation official documentation](https://module-federation.io/) to learn more.
 
 Modern.js provides an example project for Module Federation. Please refer to [module-federation-examples - modernjs](https://github.com/module-federation/module-federation-examples/tree/db5bdbeee56f779999a2c591fc553eb94eb20b36/modernjs).
+
+## Example
+
+First, enable this option in the configuration file:
+
+```ts title="modern.config.ts"
+export default defineConfig({
+  source: {
+    enableAsyncEntry: true,
+  },
+});
+```
+
+Then run the `dev` or `build` command, and you will see that the files automatically generated by Modern.js have the following structure:
+
+```bash
+node_modules
+  └─ .modern-js
+     └─ main
+        ├─ bootstrap.jsx  # asynchronous entry file
+        ├─ index.js      # real entry code
+        └─ index.html
+```
+
+The contents of `bootstrap.js` are as follows:
+
+```js
+import('./index.jsx');
+```
+
+At this point, you can consume any remote module in the current page.
+
+:::info
+Modern.js does not have ModuleFederationPlugin plugin built in. Please configure the ModuleFederationPlugin yourself via [tools.bundlerChain](/configure/app/tools/bundler-chain.md).
+
+:::

package/docs/configure/app/source/{enable-async-pre-entry.mdx → enable-async-pre-entry.md}

@@ -1,7 +1,3 @@
----
-title: enableAsyncPreEntry
----
-
 # source.enableAsyncPreEntry
 
 - **Type:** `boolean`

package/docs/configure/app/source/{entries-dir.mdx → entries-dir.md}

@@ -1,7 +1,3 @@
----
-title: entriesDir
----
-
 # source.entriesDir
 
 - **Type:** `string`

package/docs/configure/app/source/{entries.mdx → entries.md}

@@ -1,7 +1,3 @@
----
-title: entries
----
-
 # source.entries
 
 - **Type:**
@@ -22,7 +18,7 @@ type Entries = Record<
 Used to configure custom page entries.
 
 :::tip When to use
-For most scenarios, the entry automatically generated by Modern.js based on the directory structure can meet the requirements. For details, please refer to [Entry](/guides/concept/entries).
+For most scenarios, the entry automatically generated by Modern.js based on the directory structure can meet the requirements. For details, please refer to [Entry](/guides/concept/entries.md).
 
 If you need to customize page entries, you can set them through this option.
 

package/docs/configure/app/source/{exclude.mdx → exclude.md}

@@ -1,14 +1,10 @@
----
-title: exclude
----
-
 # source.exclude
 
-- **Type:** [RuleSetCondition[]](https://rspack.rs/config/module#condition)
+- **Type:** [RuleSetCondition\[\]](https://rspack.rs/config/module#condition)
 - **Default:** `[]`
 
 Specifies JavaScript/TypeScript files that do not need to be compiled. The usage is consistent with [Rule.exclude](https://rspack.rs/config/module#ruleexclude) in Rspack, which supports passing in strings or regular expressions to match the module path.
 
-import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
-
-<RsbuildConfig configName="source.exclude" />
+:::info
+The usage of this configuration item is exactly the same as that of Rsbuild. For detailed information, please refer to [Rsbuild - source.exclude](https://v2.rsbuild.dev/config/source/exclude).
+:::

package/docs/configure/app/source/{global-vars.mdx → global-vars.md}

@@ -1,7 +1,3 @@
----
-title: globalVars
----
-
 # source.globalVars
 
 - **Type:** `Record<string, JSONValue> | Function`

package/docs/configure/app/source/{include.mdx → include.md}

@@ -1,10 +1,6 @@
----
-title: include
----
-
 # source.include
 
-- **Type:** [RuleSetCondition[]](https://rspack.rs/config/module#condition)
+- **Type:** [RuleSetCondition\[\]](https://rspack.rs/config/module#condition)
 - **Default value:**
 
 ```ts
@@ -35,6 +31,6 @@ const defaultInclude = [
 The difference from the new version is that `.js`, `.mjs`, `.cjs` files only in the current directory will be compiled.
 :::
 
-import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
-
-<RsbuildConfig configName="source.include" />
+:::info
+该配置项的使用方式与 Rsbuild 完全一致。详细信息请参考 [Rsbuild - source.include](https://v2.rsbuild.dev/config/source/include)。
+:::

package/docs/configure/app/source/{main-entry-name.mdx → main-entry-name.md}

@@ -1,7 +1,3 @@
----
-title: mainEntryName
----
-
 # source.mainEntryName
 
 - **Type:** `string`

package/docs/configure/app/source/{pre-entry.mdx → pre-entry.md}

@@ -1,7 +1,3 @@
----
-title: preEntry
----
-
 # source.preEntry
 
 - **Type:** `string | string[]`
@@ -9,6 +5,6 @@ title: preEntry
 
 Add a script before the entry file of each page. This script will be executed before the page code. It can be used to execute global logics, such as injecting polyfills, setting global styles, etc.
 
-import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
-
-<RsbuildConfig configName="source.preEntry" />
+:::info
+The usage of this configuration item is exactly the same as that of Rsbuild. For detailed information, please refer to [Rsbuild - source.preEntry](https://v2.rsbuild.dev/config/source/pre-entry).
+:::

package/docs/configure/app/source/{react-compiler.mdx → react-compiler.md}

@@ -1,7 +1,3 @@
----
-title: reactCompiler
----
-
 # source.reactCompiler
 
 - **Type:** `boolean | ReactCompilerOptions`

package/docs/configure/app/source/{transform-import.mdx → transform-import.md}

@@ -1,7 +1,3 @@
----
-title: transformImport
----
-
 # source.transformImport
 
 Transform the import path, which can be used to modularly import the subpath of third-party packages. The functionality is similar to [babel-plugin-import](https://www.npmjs.com/package/babel-plugin-import)。
@@ -26,6 +22,6 @@ type TransformImport =
 
 - **Default:** `undefined`
 
-import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
-
-<RsbuildConfig configName="source.transformImport" />
+:::info
+The usage of this configuration item is exactly the same as that of Rsbuild. For detailed information, please refer to [Rsbuild - source.transformImport](https://v2.rsbuild.dev/config/source/transform-import).
+:::

package/docs/configure/app/{split-chunks.mdx → split-chunks.md}

@@ -12,6 +12,6 @@ type SplitChunksConfig =
 
 `splitChunks` is used to configure Rsbuild's chunk splitting strategy.
 
-import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
-
-<RsbuildConfig configName="splitChunks" />
+:::info
+The usage of this configuration item is exactly the same as that of Rsbuild. For detailed information, please refer to [Rsbuild - splitChunks](https://v2.rsbuild.dev/config/split-chunks).
+:::

package/docs/configure/app/tools/{autoprefixer.mdx → autoprefixer.md}

@@ -1,7 +1,3 @@
----
-title: autoprefixer
----
-
 # tools.autoprefixer
 
 - **Type:** `Object | Function`

package/docs/configure/app/tools/{bundler-chain.mdx → bundler-chain.md}

@@ -1,7 +1,3 @@
----
-title: bundlerChain
----
-
 # tools.bundlerChain
 
 - **Type:**

package/docs/configure/app/tools/{css-extract.mdx → css-extract.md}

@@ -1,7 +1,3 @@
----
-title: cssExtract
----
-
 # tools.cssExtract
 
 - **Type:**
@@ -32,6 +28,6 @@ const defaultOptions = {
 
 The config of [CssExtractRspackPlugin](https://rspack.rs/plugins/rspack/css-extract-rspack-plugin) can be modified through `tools.cssExtract`.
 
-import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
-
-<RsbuildConfig configName="tools.cssExtract" />
+:::info
+The usage of this configuration item is exactly the same as that of Rsbuild. For detailed information, please refer to [Rsbuild - tools.cssExtract](https://v2.rsbuild.dev/config/tools/css-extract).
+:::

package/docs/configure/app/tools/{css-loader.mdx → css-loader.md}

@@ -1,7 +1,3 @@
----
-title: cssLoader
----
-
 # tools.cssLoader
 
 - **Type:** `Object | Function`
@@ -16,6 +12,6 @@ const defaultOptions = {
 
 The config of [css-loader](https://github.com/webpack-contrib/css-loader) can be modified through `tools.cssLoader`.
 
-import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
-
-<RsbuildConfig configName="tools.cssLoader" />
+:::info
+The usage of this configuration item is exactly the same as that of Rsbuild. For detailed information, please refer to [Rsbuild - tools.cssLoader](https://v2.rsbuild.dev/config/tools/css-loader).
+:::

package/docs/configure/app/tools/{dev-server.mdx → dev-server.md}

@@ -1,7 +1,3 @@
----
-title: devServer
----
-
 # tools.devServer
 
 - **Type:** `Object`

package/docs/configure/app/tools/{html-plugin.mdx → html-plugin.md}

@@ -1,7 +1,3 @@
----
-title: htmlPlugin
----
-
 # tools.htmlPlugin
 
 - **Type:** `boolean | Object | Function`
@@ -40,6 +36,6 @@ SSR Application does not enable the `minify.removeComments` configuration, other
 
 The configs of [html-rspack-plugin](https://github.com/rstackjs/html-rspack-plugin) can be modified through `tools.htmlPlugin`.
 
-import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
-
-<RsbuildConfig configName="tools.htmlPlugin" />
+:::info
+The usage of this configuration item is exactly the same as that of Rsbuild. For detailed information, please refer to [Rsbuild - tools.htmlPlugin](https://v2.rsbuild.dev/config/tools/html-plugin).
+:::

package/docs/configure/app/tools/{less.mdx → less.md}

@@ -1,7 +1,3 @@
----
-title: less
----
-
 # tools.less
 
 - **Type:** `Object | Function`

package/docs/configure/app/tools/{lightningcss-loader.mdx → lightningcss-loader.md}

@@ -1,7 +1,3 @@
----
-title: lightningcssLoader
----
-
 # tools.lightningcssLoader
 
 - **Type:** `Rspack.LightningcssLoaderOptions | Function | boolean`
@@ -34,6 +30,6 @@ const defaultOptions = {
 
 It should be noted that when `lightningcss-loader` is turned on, `postcss-loader` will be turned off by default.
 
-import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
-
-<RsbuildConfig configName="tools.lightningcssLoader" />
+:::info
+The usage of this configuration item is exactly the same as that of Rsbuild. For detailed information, please refer to [Rsbuild - tools.lightningcssLoader](https://v2.rsbuild.dev/config/tools/lightningcss-loader).
+:::

package/docs/configure/app/tools/{minify-css.mdx → minify-css.md}

@@ -1,7 +1,3 @@
----
-title: minifyCss
----
-
 # tools.minifyCss
 
 - **Type:** `Object | Function | undefined`

package/docs/configure/app/tools/{postcss.mdx → postcss.md}

@@ -1,7 +1,3 @@
----
-title: postcss
----
-
 # tools.postcss
 
 - **Type:** `Object | Function`
@@ -33,6 +29,6 @@ Modern.js integrates PostCSS by default, you can configure [postcss-loader](http
 
 It should be noted that when you enable the `tools.lightningcss` configuration, PostCSS will be disabled by default, including `postcss-loader` and its default plugins.
 
-import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
-
-<RsbuildConfig configName="tools.postcss" />
+:::info
+The usage of this configuration item is exactly the same as that of Rsbuild. For detailed information, please refer to [Rsbuild - tools.postcss](https://v2.rsbuild.dev/config/tools/postcss).
+:::

package/docs/configure/app/tools/rspack.md

@@ -0,0 +1,10 @@
+# tools.rspack
+
+- **Type:** `Rspack.Configuration | Function | undefined`
+- **Default:** `undefined`
+
+`tools.rspack` is used to configure [Rspack](https://rspack.rs/).
+
+:::info
+The usage of this configuration item is exactly the same as that of Rsbuild. For detailed information, please refer to [Rsbuild - tools.rspack](https://v2.rsbuild.dev/config/tools/rspack).
+:::

package/docs/configure/app/tools/{sass.mdx → sass.md}

@@ -1,7 +1,3 @@
----
-title: sass
----
-
 # tools.sass
 
 - **Type:** `Object | Function`

package/docs/configure/app/tools/style-loader.md

@@ -0,0 +1,10 @@
+# tools.styleLoader
+
+- **Type:** `Object | Function`
+- **Default:** `{}`
+
+The config of [style-loader](https://github.com/webpack-contrib/style-loader) can be set through `tools.styleLoader`.
+
+:::info
+The usage of this configuration item is exactly the same as that of Rsbuild. For detailed information, please refer to [Rsbuild - tools.styleLoader](https://v2.rsbuild.dev/config/tools/style-loader).
+:::

package/docs/configure/app/tools/{swc.mdx → swc.md}

@@ -1,7 +1,3 @@
----
-title: swc
----
-
 # tools.swc
 
 - **Type:** `Object | Function`
@@ -9,9 +5,9 @@ title: swc
 
 ## Introduction
 
-import SWC from '@site-docs-en/components/swc.mdx';
+[SWC](https://SWC.rs/) (Speedy Web Compiler) is a transformer and minimizer for JavaScript and TypeScript based on `Rust`. SWC can provide the same abilities with Babel, and it's more than 10x faster than Babel.
 
-<SWC />
+Modern.js has a out-of-box plugin for SWC, power your Web application with Polyfill and minification, we also port some common used Babel plugins to SWC.
 
 :::tip
 When using Rspack as the bundler, SWC will be used for transpiling and compression by default, so you don't need to install or configure the SWC plugin.
@@ -55,9 +51,9 @@ export default {
 };
 ```
 
-Please note that the SWC plugin is still an experimental feature, and the SWC Wasm plugin is currently not backward compatible. The version of the SWC plugin is closely tied to the version of swc_core that Rspack depends on.
+Please note that the SWC plugin is still an experimental feature, and the SWC Wasm plugin is currently not backward compatible. The version of the SWC plugin is closely tied to the version of swc\_core that Rspack depends on.
 
-This means that you must to choose an SWC plugin that matches the current version of swc_core to ensure that it works properly. If the version of the SWC plugin you are using does not match the version of swc_core that Rspack depends on, Rspack will throw the following error during the build process:
+This means that you must to choose an SWC plugin that matches the current version of swc\_core to ensure that it works properly. If the version of the SWC plugin you are using does not match the version of swc\_core that Rspack depends on, Rspack will throw the following error during the build process:
 
 ```
 1: failed to run Wasm plugin transform. Please ensure the version of `swc_core`