Table tag warning issue in vue3

[chenshuangkun]

依赖版本

    "@eslint/js": "^9.12.0",
    "@rsbuild/core": "^1.1.8",
    "@rsbuild/plugin-vue": "^1.0.5",
    "eslint": "^9.12.0",
    "globals": "^15.11.0",
    "husky": "^8.0.0",
    "lint-staged": "^15.2.11",
    "prettier": "^3.3.3",
    "typescript": "^5.7.2",
    "typescript-eslint": "^8.8.1"

相关vue代码

<template>
  <div class="content">
    <h1>Rsbuild with Vue</h1>
    <table>
      <tr>
        <td>序号</td>
        <td>姓名</td>
        <td>年龄</td>
      </tr>
    </table>
  </div>
</template>

警告信息

ModuleWarning: <tr> cannot be child of <table>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.
  │ 3  |      <h1>Rsbuild with Vue</h1>
  │ 4  |      <table>
  │ 5  |        <tr>
  │    |        ^^^^
  │ 6  |          <td>序号</td>
  │    |  ^^^^^^^^^^^^^^^^^^^
  │ 7  |          <td>姓名</td>
  │    |  ^^^^^^^^^^^^^^^^^^^
  │ 8  |          <td>年龄</td>
  │    |  ^^^^^^^^^^^^^^^^^^^
  │ 9  |        </tr>
  │    |  ^^^^^^^^^^^ (from: /Users/chenshuangkun/Downloads/下载文件/rspack-vue3-dome2/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[10].use[0])
  │     at /Users/chenshuangkun/Downloads/下载文件/rspack-vue3-dome2/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/vue-loader/dist/templateLoader.js:73:39
  │     at Array.forEach (<anonymous>)
  │     at Object.TemplateLoader (/Users/chenshuangkun/Downloads/下载文件/rspack-vue3-dome2/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/vue-loader/dist/templateLoader.js:72:23)
  │     at LOADER_EXECUTION (/Users/chenshuangkun/Downloads/下载文件/rspack-vue3-dome2/node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@rspack/core/dist/index.js:6131:18)
  │     at runSyncOrAsync2 (/Users/chenshuangkun/Downloads/下载文件/rspack-vue3-dome2/node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@rspack/core/dist/index.js:6132:6)
  │     at node:internal/util:375:7
  │     at new Promise (<anonymous>)
  │     at runSyncOrAsync2 (node:internal/util:361:12)
  │     at runLoaders (/Users/chenshuangkun/Downloads/下载文件/rspack-vue3-dome2/node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@rspack/core/dist/index.js:6612:56)

 @ ./src/App.vue.js?vue&type=template&id=7ba5bd90&scoped=true!=!../node_modules/.pnpm/vue-loader@17.4.2_vue@3.5.13_typescript@5.7.2__webpack@5.97.1/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=template&id=7ba5bd90&scoped=true
 @ ./src/App.vue
 @ ./src/index.ts

rsbuild.config.ts相关配置

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

export default defineConfig({
  plugins: [pluginVue()],
});

[inottn]

The warning message seems pretty clear. What behavior are you expecting?

[chenjiahan]

This is a hint from the Vue 3 compiler to correct incorrect table usage. I suggest to correct the table code according to the log.