[Bug]: Vue2 JSX plugin problem

[wzc321]

Version

System:
    OS: Windows 10 10.0.17134
    CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
    Memory: 5.16 GB / 31.93 GB
  Browsers:
    Edge: Spartan (42.17134.1098.0)
    Internet Explorer: 11.0.17134.1
  npmPackages:
    @rsbuild/core: ^0.7.6 => 0.7.6
    @rsbuild/plugin-babel: ^0.7.6 => 0.7.6
    @rsbuild/plugin-sass: ^0.7.6 => 0.7.6
    @rsbuild/plugin-vue2: ^0.7.6 => 0.7.6
    @rsbuild/plugin-vue2-jsx: ^0.7.6 => 0.7.6

Details

when I use @rsbuild version is 0.6x, Not any trouble! But there is a problem when I use 0.7x, here is details:

× Module build failed:
╰─▶ × Error:
│ × Expected '>', got 'class'
│ ╭─[E:\xxx\xxx\financing-area-configuration-modify.vue:432:1]
│ 432 │ },
│ 433 │ renderContent(h, { node, data }) {
│ 434 │ return (
│ 435 │
│ · ─────
│ 436 │ {node.label}
│ 437 │
│ 438 │ <apc-button
│ ╰────
│
│

help: File was processed with this loader: 'builtin:swc-loader??clonedRuleSet-107.use[0]$E:\node_modu
les.pnpm\vue-
[email protected]_52331a143e3da0823bfe473a1617a43f\node_modules\vue-loader\lib\index.js??vue-loader-options'

Reproduce link

https://gitee.com/wzc0x0/rspack-examples/tree/main/rsbuild/vue2-element-ui

Reproduce Steps

1. rsbuild.config.ts

 plugins: [
    pluginVue2(),
    pluginBabel({
      include: /\.(?:jsx|tsx)$/,
      exclude: /[\\/]node_modules[\\/]/,
    }),
    pluginVue2Jsx(),
    pluginSass(),
  ],

2. use render jsx in .vue liks this:

 renderContent(h, { node, data, store }) {
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
            <span>
              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
            </span>
          </span>);
      }

[github-actions]

Hello @wzc321. Please provide a reproduction repository or online demo. For background, see Why reproductions are required. Thanks ❤️

[wzc321]

OK, The problem is repeated when I use your rsbuild-example. see link,
https://gitee.com/wzc0x0/rspack-examples/tree/main/rsbuild/vue2-element-ui

[chenjiahan]

Please add lang="jsx" or lang="tsx" to the script tag, and it will work:

This is because Rsbuild only compile .jsx / .tsx files with babel to speed up the compilation:

[wzc321]

Thanks a lot !