`Cannot set property 'textContent' of null` within JSX expression about solid

[ryansolid]

I see what's happening here although I'm not stoked about it. Basically the generated HTML is different than the template. Chrome and I imagine many browsers automatically add <tbody> elements when the innerHTML is set which messes with the parsers ability to walk the tree at compile time since it's not there. You can fix this issue by adding the <tbody> tag but it is definitely going to catch people.

It seems possible to to detect this in the template and always add tbody if it is missing, but I'm unsure of what other gotchas we are going to hit like this which browser is a lot more forgiving of differently formed html (fixing it as it sees fit) differing from the template actually provided.

Either bug location is fine. People generally provide a nice example that is reproduceable with Solid code so here works. Even if it often doesn't lead to a Solid fix so I don't get to leverage tying my git commits to the issue, I feel that a lot more minor of a thing.

---

EDIT:
It looks like Chrome only adds the tbody if it is part of a template clone or innerHTML which means that I don't have to worry about about the Component wrapping a tr issue (making it unable to be detected). Essentially if in a given template if I encounter table I should check for tr direct descendants. If there are any I should wrap all children in a tbody and continue parsing.

[bluenote10]

👍 thanks for the clarification! I wasn't aware of such behavior and thought using tbody is optional for tables without a header because it always worked fine in other frameworks. Even if I knew it, I would have expected to just render the malformed HTML.

I'm wondering if there are more of these cases of magically added nodes? I found at least one other: If you omit the table tag altogether, but have a tbody it also crashes.

[ryansolid]

Yeah it is going to be difficult to impossible for me to handle all the cases. I'm not sure how many I should chase after. Maybe I could do some detection of html structure at compile time and throw errors so at least there is no runtime issue. However, it would be difficult to guarantee jsdom etc would have the same output. I could also do a check at runtime on template creation. Maybe that's enough for now.

Basically there is code that looks like:

const template = document.createElement('template');
template.innerHTML = templateString;

I could do a check at that point to ensure template.innerHTML === templateString. It puts the onus on the developer to make well formed JSX. Opinion?

[bluenote10]

Yes, a clear error message seems to be the best option, either at compile time or run time.

[ryansolid]

Fixed with a runtime check in v0.9.0.