ERR: The browser resolved template HTML does not match JSX input

What does this if statement do?

if ("_DX_DEV_" && check && t.innerHTML.split("<").length - 1 !== check)
    throw `The browser resolved template HTML does not match JSX input:\n${t.innerHTML}\n\n${html}. Is your HTML properly formed?`;

(Line: 41): https://github.com/ryansolid/dom-expressions/blob/98e890c6b8c2afbd497b715f1d867cd90da6d66a/packages/dom-expressions/src/client.js

I just get a super annoying error when creating tables like this (in production no doubt about it)

<table>
    <tr>Do you really wanna listen to her large mouth instead of playing video games?</tr>
    <tr>Get the hell out of there, dude</tr>
</table>

When I remove these four lines of code everything works. Like, when I remove all the <tr> it works. As I said, in build version everything works just fine, I think there should be a bug, or why should this break?

[leeoniya]

lol, when i saw this issue title i immediately thought, “Bet it’s implicit <tbody>” 😄

i have a devmode warning for this in domvm: https://github.com/domvm/domvm/blob/master/src/view/addons/devmode.js#L58

[ryansolid]

The REPL might not be in dev mode. The error is correct. The problem is browsers automatically correct poorly formed HTML. We build the DOM using template cloning so we are at the mercy of how they “correct” our templates. In your example every browser adds a <tbody> around the <tr>s. Manually adding it fixes the problem. Ive considered adding code to automatically add the <tbody> just there are a ton of these scenarios. I haven’t found a library that can check for this at compile time as of yet. Would love to smooth this out.

By the way, if the table had dynamic parts it would break in production, because the walks that add effect bindings would be broken.