Skip to content

Commit

Permalink
docs: add tips for SWC plugin version (#3121)
Browse files Browse the repository at this point in the history
  • Loading branch information
chenjiahan authored Aug 3, 2024
1 parent 112f628 commit 0d43f0d
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 10 deletions.
21 changes: 16 additions & 5 deletions website/docs/en/guide/basic/configure-swc.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,27 +13,38 @@ The options for `builtin:swc-loader` are consistent with the JS version of swc-l

### Register SWC Plugin

`tools.swc` can be used to register SWC's Wasm plugins, for example, registering `@swc/plugin-styled-jsx`:
`tools.swc` can be used to register SWC's Wasm plugins, for example, registering [@swc/plugin-styled-components](https://www.npmjs.com/package/@swc/plugin-styled-components):

```js
export default {
tools: {
swc: {
jsc: {
experimental: {
plugins: [['@swc/plugin-styled-jsx', {}]],
plugins: [['@swc/plugin-styled-components', {}]],
},
},
},
},
};
```

Please note that SWC's wasm plugins are currently not backward compatible, and there is a certain binding relationship between the SWC plugin and the version of `@swc/core` that Rspack depends on. Therefore, you must select the SWC plugin that matches the current version of `@swc/core` for SWC to work.
> You can check out the [awesome-swc](https://github.com/swc-contrib/awesome-swc) repository to see the SWC plugins available in the community.
For more information, refer to [SWC - Selecting the version](https://swc.rs/docs/plugin/selecting-swc-core).
### SWC Plugin Version

> You can check out the [awesome-swc](https://github.com/swc-contrib/awesome-swc) repository to see the SWC plugins available in the community.
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:

```text
1: failed to run Wasm plugin transform. Please ensure the version of `swc_core`
used by the plugin is compatible with the host runtime.
```

If you encounter the above issue, a common solution is to upgrade both the Rsbuild and the SWC plugin to the latest versions. If this does not solve the problem, you can refer to [SWC - Selecting the version](https://swc.rs/docs/plugin/selecting-swc-core) to understand the version information of `swc_core`.

You can check the version information of `swc_core` in the Cargo.toml file within the Rust code repository. For example, in the Rspack repository, you can open [Cargo.toml](https://github.com/web-infra-dev/rspack/blob/main/Cargo.toml) and search for the `swc_core` keyword to view the version.

### Enable Emotion Support

Expand Down
21 changes: 16 additions & 5 deletions website/docs/zh/guide/basic/configure-swc.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,27 +13,38 @@ Rsbuild 默认启用 SWC 的以下功能:

### 注册 SWC 插件

`tools.swc` 可以用于注册 SWC 的 Wasm 插件,比如注册 `@swc/plugin-styled-jsx`
`tools.swc` 可以用于注册 SWC 的 Wasm 插件,比如注册 [@swc/plugin-styled-components](https://www.npmjs.com/package/@swc/plugin-styled-components)

```js
export default {
tools: {
swc: {
jsc: {
experimental: {
plugins: [['@swc/plugin-styled-jsx', {}]],
plugins: [['@swc/plugin-styled-components', {}]],
},
},
},
},
};
```

注意,目前 SWC 的 Wasm 插件不向后兼容,SWC 插件和 Rspack 依赖的 `@swc/core` 的版本存在一定的绑定关系。因此,你需要选择和当前 `@swc/core` 版本匹配的 SWC 插件,才能使 SWC 正常执行
> 你可以通过 [awesome-swc](https://github.com/swc-contrib/awesome-swc) 仓库查看社区中可用的 SWC 插件。
更多信息可参考 [SWC - Selecting the version](https://swc.rs/docs/plugin/selecting-swc-core)
### SWC 插件版本

> 你可以通过 [awesome-swc](https://github.com/swc-contrib/awesome-swc) 仓库查看社区中可用的 SWC 插件。
请注意,SWC 插件仍然是一个实验性的功能,目前 SWC 的 Wasm 插件是不向后兼容的,SWC 插件的版本与 Rspack 依赖的 `swc_core` 的版本存在强耦合关系。

这意味着,你需要选择和当前 `swc_core` 版本匹配的 SWC 插件,才能使它正常执行。如果你使用的 SWC 插件版本与 Rspack 依赖的 `swc_core` 版本不匹配,Rspack 在执行构建时会抛出如下错误:

```text
1: failed to run Wasm plugin transform. Please ensure the version of `swc_core`
used by the plugin is compatible with the host runtime.
```

如果你遇到了以上问题,通常可行的解决方法是将 Rsbuild 和 SWC 插件都升级到最新版本。如果无法解决,可以参考 [SWC - Selecting the version](https://swc.rs/docs/plugin/selecting-swc-core) 来了解 `swc_core` 的版本信息。

你可以通过 Rust 代码仓库中的 Cargo.toml文件来查看 `swc_core` 的版本信息。以 Rspack 仓库为例,你可以打开 [Cargo.toml](https://github.com/web-infra-dev/rspack/blob/main/Cargo.toml),并搜索 `swc_core` 关键字来查看版本。

### 启用 Emotion 支持

Expand Down

0 comments on commit 0d43f0d

Please sign in to comment.