Cannot use <table> - "Hydration failed" - HTMLUnknownElement

[andrechalella]

I cannot make a simple table using Next.js.

The page crashes in browser with Hydration failed because the initial UI does not match what was rendered on the server.

My environment is Next.js 12.1.4 in Windows 10 (WSL).

Steps to reproduce

1. Create a new Next.js project (I used npx create-next-app@latest).
2. Create pages/table.js with the following contents:

export default () => ( 
  <table>
    <caption>Alien football stars</caption>
    <tr>
        <th scope="col">Player</th>
        <th scope="col">Gloobles</th>
        <th scope="col">Za'taak</th>
    </tr>
    <tr>
        <th scope="row">TR-7</th>
        <td>7</td>
        <td>4,569</td>
    </tr>
    <tr>
        <th scope="row">Khiresh Odo</th>
        <td>7</td>
        <td>7,223</td>
    </tr>
    <tr>
        <th scope="row">Mia Oolong</th>
        <td>9</td>
        <td>6,219</td>
    </tr>
  </table>
)

Note: this example table was taken directly from MDN.

3. Start server (npm run dev) and visit page.

Expected result

Correct rendering of a table without errors.

Actual result

Page with table does render, but a big modal div is displayed over the page with the contents below -- view screenshot here.

1 of 3 unhandled errors

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Call Stack
throwOnHydrationMismatch
node_modules/react-dom/cjs/react-dom.development.js (14388:0)
tryToClaimNextHydratableInstance
node_modules/react-dom/cjs/react-dom.development.js (14416:0)
updateHostComponent$1
node_modules/react-dom/cjs/react-dom.development.js (20711:0)
beginWork
node_modules/react-dom/cjs/react-dom.development.js (22447:0)
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js (4161:0)
Object.invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js (4210:0)
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js (4274:0)
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js (27405:0)
performUnitOfWork
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js (26508:12)
workLoopSync
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js (26417:5)
renderRootSync
node_modules/react-dom/cjs/react-dom.development.js (26390:0)
performConcurrentWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (25694:0)
workLoop
node_modules/scheduler/cjs/scheduler.development.js (266:0)
flushWork
node_modules/scheduler/cjs/scheduler.development.js (239:0)
MessagePort.performWorkUntilDeadline
node_modules/scheduler/cjs/scheduler.development.js (533:0)

[thibautsabot]

Hello!

I'm not sure why this is happening (as the HTML is valid) but it could be fixed by wrapping the content on the table with a <tbody>.

  <table>
    <caption>Alien football stars</caption>
    <tbody>
      <tr>
        <th scope="row">Mia Oolong</th>
        <td>9</td>
        <td>6,219</td>
      </tr>
    </tbody>
  </table>

[andrechalella]

Thank you very much for your effort in this. You were able to go much further than I possibly could.

Could you please clarify one point? When you say that the exception is expected and that it's a good thing, do you mean that the table is wrong? If so, I'd be surprised, because as far as I know <tbody> is not mandatory in that scenario. About the other (<p><p>) case, I agree it's wrong and throwing is a good thing.

[icyJoseph]

I think there's a couple of layers to this.

Both client and server side React, catch validateDOMNesting errors.

However, it does seem that for some reason, the client is able to resolve the HTML, and the server is not. Though, the React code base contains this comment.

  // This validation code was written based on the HTML5 parsing spec:
  // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope
  //
  // Note: this does not catch all invalid nesting, nor does it try to (as it's
  // not clear what practical benefit doing so provides); instead, we warn only
  // for cases where the parser will give a parse tree differing from what React
  // intended. For example, <b><div></div></b> is invalid but we don't warn
  // because it still parses correctly; we do warn for other cases like nested
  // <p> tags where the beginning of the second element implicitly closes the
  // first, causing a confusing mess.

  // https://html.spec.whatwg.org/multipage/syntax.html#special

I assume this is the reason why there's mismatch, the nested p tags turning into a list, or table without tbody result to funky HTML.

Since React uses the https://www.npmjs.com/package/warning/v/4.0.2, package to warn, and with the above into consideration, we see an error about mismatched UI during hydration (still not sure why the client seems to render the correct html though, it should be equally wrong), and this in turn is, most likely on purpose not caught by Next.js, to make sure, we as developers fix the issue.

Perhaps I've been a bit vague, but why the tbody missing is a problem, must be related to that comment block above.

[andrechalella]

With this last reply I was able to understand where the table problem comes from. I only knew that tr in table was valid, but I didn't know that authoring tools were required to transparently insert a tbody in between.

I'll leave here a link for the most objective explanation of this detail I could find: https://stackoverflow.com/questions/7490364/why-do-browsers-still-inject-tbody-in-html5

I'm not sure React should fail on this, but at least now I understand. And definitely user experience could be improved in ways like you mentioned.

Could you please provide links to the bugs you opened?

[icyJoseph]

#36765 and facebook/react#24519

Feels wrong to label this as answered, but that's as far as we can chase this rabbit.

[h0lme3]

thanks for your experience share! @thibautsabot , @icyJoseph
I have resolved such an issue(with validateDOMNesting).

[john7p]

I am experiencing the same problem. In the end I changed all table HTML elements to divs and it's working fine now, but I am less than happy about it, as this is a workaround.

[hdsuperman]

Use div instead of table tag, example:

<div className="text-xs mt-5 table">
  <div className="table-row">
    <div className="table-cell text-color-secondary pr-4">Creation time</div>
    <div className="table-cell text-color-primary">2022-07-13 08:12:35</div>
  </div>
  <div className="table-row">
    <div className="table-cell text-color-secondary pr-4 pt-2">Founder</div>
    <div className="table-cell text-color-primary pt-2">Zhang san</div>
  </div>
  <div className="table-row">
    <div className="table-cell text-color-secondary pr-4 pt-2">Progress</div>
    <div className="table-cell text-color-primary pt-2">64%</div>
  </div>
</div>

[hdsuperman]

Use css style: display:table for table layout.

[austinstarin]

Adding <tbody></tbody> only seems to resolve this issue when the <table></table> element and children are inside a page component. If the <table></table element and children including <tbody></tbody> is imported as part of another component the error still occurs.

[apecollector]

Same issue, even this very simple table used as an example from w3schools:

const table = () => (
  <table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
  </table>
);

[chrisling-dev]

Haven't read extensively about spec of table but I was able to get my use case working after a few trials and errors and got conclusion that:

• direct child of table tag should be thead or tbody
• direct child of thead or tbody should be tr

so I'd rewrite your code to

const table = () => (
  <table>
    <thead>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
    </tbody>
  </table>
);

Hope this helps!

[simonjduff]

This was exactly it for me, I had inside of but needed in between

[shrutivtu]

I tried using tbody and thead...didnt work for me. Trying other methods now and making it from scratch.

[BernardTheFour]

I face the same issue when adding tfoot

<table>
   <thead>head</thead>
   <tbody>body</tbody>
   <tfoot>foot</tfoot>
</table>

but, changing table to div solve the issue, answered by @hdsuperman

<div>
   <thead>head</thead>
   <tbody>body</tbody>
   <tfoot>foot</tfoot>
</div>

[artemis-prime]

Has someone filed this as a bug??

[icyJoseph]

Hi,

This is not a bug, it is just that the browser changes the HTML "as it arrives", before the hydration process starts. So in fact, React does generate the HTML we want, but the browser changes it, and then React tries to replay the rendering, but it encounters a changed DOM.

This is one of those quirks with HTML, like p's can't nest. The screenshot below is just pure HTML, no frameworks, nothing, and as you can see, the browser is doing its own thing with the HTML, by inserting tbody.