Skip to content

Incorrect vite warning regarding nesting tr directly in table element #12088

Open
@tomtheisen

Description

Vue version

3.5.10

Link to minimal reproduction

https://play.vuejs.org/#eNp9kDELwjAQhf9KuVnqoJMUQcVBBxV1zFLrWatpEpKLFqT/3SSlrYN0CS/vexfe5QMLpeKXRZhBQlgqnhLOmYiihNILb6S/6Hkydkcg4xY51Y/ACMhkUtyKPH4YKdyLHx9nkMlSFRz1XlEhhWEwiwLxLOVcvrfBI21x1PrZHbPnH/9hKu8xOGg0qF/IoGOU6hypwevTDiunO1jKq+UuPQCPaCS3vmMTW1pxdbV/cqHtplRSUyHys1lXhMK0S/miPlmHPAP3rauB1fu6k3ga5pioof4CfnKCSA==

Steps to reproduce

Create a SFC with this content.

<template>
  <table>
    <tr></tr>
  </table>
</template>

Vite will issue a warning:

warning: <tr> cannot be child of <table>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.

This warning is factually incorrect. The relevant spec says that a <table> may contain:

In this order: optionally a caption element, followed by zero or more colgroup elements, followed optionally by a thead element, followed by either zero or more tbody elements or one or more tr elements, followed optionally by a tfoot element, optionally intermixed with one or more script-supporting elements.

This is because htmlNesting.ts does not list tr as a valid child of table, despite the spec allowing it.

What is expected?

I expect no warning to be produced.

What is actually happening?

A warning is produced from vite:

warning: <tr> cannot be child of <table>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.

System Info

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions