Skip to content

[JSX Validation]: A <tr/> which has a direct child text should produce a validation error #2183

@KotoriK

Description

@KotoriK

Describe the bug

See this JSX:

 <div>
      <table>
        <thead>
          <tr>Name</tr>
        </thead>
        <tbody>
          <tr>
            <td>iPhone</td>
            <td>
              13
            </td>
          </tr>
        </tbody>
      </table>
    </div>

In the template above, a <tr/> has a text node as its child. As expected, malform syntaxes like this should be blocked in build stage. However this syntax somehow passes the validation, and result in a unclosed template like _$template(`<div><table><thead><tr>Name</tr></thead><tbody><tr><td>iPhone`). It will cause any insert efforts failed with TypeError: Cannot read properties of null (reading 'nextSibling') , since the template is not correct and browser explain it to something not expected.

Your Example Website or App

https://codesandbox.io/p/devbox/great-leaf-tyf99q?file=%2Fsrc%2FApp.tsx%3A21%2C21-21%2C51

Steps to Reproduce the Bug or Issue

  1. Open the devbox and everything should render correctly
  2. De-comment Line 15 -17
  3. Render will failed and in console a TypeError should be thrown

Expected behavior

Templates should be correctly generated, or a JSX validation error should be thrown.

Screenshots or Videos

No response

Platform

  • OS: Windows
  • Browser: Not related
  • SolidJs Version: 1.8.14

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions