fresh: "Improper nesting" logged out unexpectedly

The issue exists for a while (if I remember correctly, it was introduced starting 1.2). Whenever my component get rendered, there’s a lot of weird output:

Add @babel/plugin-transform-react-jsx-source to get a more detailed component stack. Note that you should not add it to production builds of your App for bundle size reasons.
Improper nesting of table. Your <tr> should have a <thead/tbody/tfoot/table> parent.<tr class="suggestionRow">..</tr>

  in tr
  in SearchBar
  in 
  in Page

Improper nesting of table. Your <td> should have a <tr> parent.<td class="suggestionCategory" />

  in td
  in SearchBar
  in 
  in Page

Improper nesting of table. Your <td> should have a <tr> parent.<td class="suggestionList" />

  in td
  in SearchBar
  in 
  in Page

My component (as an island):

<div
  class="inputSuggestions"
  style={showSuggestion && results.length ? { display: 'block' }: {}}>
  <table>
    <tr class='suggestionRow'>
      <td class='suggestionCategory'>
        <div class='suggestionDic'>English</div>
      </td>
      <td class='suggestionList'>
        {/*<ul></ul>*/}
      </td>
    </tr>
  </table>
</div>

My fresh version: v1.4.3.

About this issue

Original URL
State: closed
Created 10 months ago
Reactions: 3
Comments: 15 (3 by maintainers)

Most upvoted comments

If anyone else is experiencing this and wishes (until the issue is resolved) to suppress the extremely verbose error messages which flood the console, you can achieve this with the following code (in dev.ts or main.ts):

const origConsoleError = console.error;
console.error = (msg) => {
  if (typeof msg === "string" && msg.includes("Improper nesting of table")) return;
  origConsoleError(msg);
};

cknight on Oct 15, 2023

@marvinhagemeister

preact/debug saves the list of VNode(s) in options._diff hook: https://github.com/preactjs/preact/blob/10.17.1/debug/src/debug.js#L142
And check the list in options._commit hook: https://github.com/preactjs/preact/blob/10.17.1/debug/src/debug.js#L380
I debug and found out that vnode._parent is undefined for every vnode, then “Improper nesting…” is logged.
The problem lies in preact-render-to-string:

4.1. When each vnode is being rendered, it is assigned a vnode._parent and options._diff is called: https://github.com/preactjs/preact-render-to-string/blob/v6.2.1/src/index.js#L173
4.2. After each vnode rendered, its vnode._parent is cleared: https://github.com/preactjs/preact-render-to-string/blob/v6.2.1/src/index.js#L453
4.3. And options._commit is called after the root vnode rendered: https://github.com/preactjs/preact-render-to-string/blob/v6.2.1/src/index.js#L68

So my proposal is we delete the step 4.2 (I tried and it did work), if that’s alright for you, I’ll create a PR for this.

osddeitf on Sep 15, 2023

I was using Microsoft Edge, but it is not relevant now that I have made a minimal reproduction. You can create an island like this:

export default function BarSearch() {
  return (
    <div
      class="inputSuggestions"
      // style={showSuggestion && results.length ? { display: 'block' }: {}}>
      >
      <table>
        <tr class='suggestionRow'>
          <td class='suggestionCategory'>
            <div class='suggestionDic'>English</div>
          </td>
          <td class='suggestionList'>
            {/*<ul></ul>*/}
          </td>
        </tr>
      </table>
    </div>
  )
}

And even when using curl to fetch the route (which renders the island), the output will appear.

osddeitf on Sep 14, 2023