Rsbuild 同时使用 Vue + React

Rsbuild 是由 Rspack 驱动的高性能构建工具，它默认包含了一套精心设计的构建配置，提供开箱即用的开发体验，并能够充分发挥出 Rspack 的性能优势。

我个人非常喜欢用 Rsbuild 开发项目，最近想在一个 Rsbuild 项目里同时使用 Vue 和 React（多页面的形式），按着文档配置多页面应用，结果配置 plugins: [pluginReact(), pluginVue()] 时报错了（error [VueLoaderPlugin Error] No matching use for vue-loader is found.），但是二者顺序换一下 plugins: [pluginVue(), pluginReact()] 就正常了。

非常疑惑，于是到 rsbuild 的 Discussions 问一下，结果 chenjiahan 大神光速回复并修复了这个问题（fix(plugin-vue): order problem with pluginReact #4713）。

可以看出 plugins: [pluginReact(), pluginVue()] 报错的原因是： VueLoaderPlugin 在 ReactFastRefreshPlugin 之后执行会因为 builtin:react-refresh-loader 抛出错误。

以下是在一个 Rsbuild 项目里同时使用 Vue 和 React 的配置 rsbuild.config.ts

import { defineConfig } from '@rsbuild/core'
import { pluginReact } from '@rsbuild/plugin-react'
import { pluginVue } from '@rsbuild/plugin-vue'

export default defineConfig({
  // "@rsbuild/plugin-vue": "^1.0.6",
  // plugins: [pluginReact(), pluginVue()], // error   [VueLoaderPlugin Error] No matching use for vue-loader is found.
  plugins: [pluginVue(), pluginReact()], // work
  source: {
    entry: {
      react: './src/react.tsx',
      vue: './src/vue.ts'
    }
  },
  html: {
    template({ entryName }) {
      const templates = {
        react: './static/react.html',
        vue: './static/vue.html'
      }
      return templates[entryName] || './static/react.html'
    }
  }
})

等后续 @rsbuild/plugin-vue 发布了新版本，plugins: [pluginReact(), pluginVue()] 就不会报错了。