Error when an island returns a <tr/> component.

[nicolo-ribaudo]

I have a server-side rendered table that uses an island that returns a <tr />.

The island code can be as simple as

export default function NewTripForm() {
  return <tr />;
}

In the browser console, I get this error from Preact:

Improper nesting of table. Your <tr> should have a <thead/tbody/tfoot/table> parent.
  in tr
  in NewTripForm

[lucacasonato]

The error is from preact/debug. I assume this happens because preact does not control the tree above the <tr> element, and as such is not aware that it is actually in a <table>.

cc @marvinhagemeister

[nicolo-ribaudo]

Just silencing the error if the <tr> is the root of the Preact-controlled tree is not enough.

My island looks like this:

import { newTripFormVisible } from "@/utils/signals.ts";

const TripsListRow = () => (
  <tr>
    <td>Hello</td>
  </tr>
);

export default function NewTripForm() {
  if (!newTripFormVisible.value) {
    // Islands cannot return null.
    // TODO: Revisit when https://github.com/denoland/fresh/issues/502 is fixed.
    return <tr style="display:none" />;
  }

  // This doesn't work
  return <TripsListRow />;

  // This does
  return (
    <tr>
      <td>Hello</td>
    </tr>
  );
}

Where newTripFormVisible is a signal whose value is initially false and becomes true when clicking on a button.

If NewTripForm directly returns the <tr> I get the error above but the row still appears. However, if NewTripForm returns TripsListRow, I get this error:

Uncaught (in promise) DOMException: Node.insertBefore: Child to insert before is not a child of this node debug.js:42:7
    Preact 6
    setState trips:3980
    Preact 4
    handleClick NewTripButton.tsx:26
    B Preact

As a workaround, I'm using TripsListRow as if it was a function and not a component.

[marvinhagemeister]

@lucacasonato yeah the error is coming from preact/debug and it walks up the virtual tree and expects a <table> node to be somewhere there. I guess with islands being a separate subtree that assumption doesn't hold true anymore. It's something we've been thinking a lot about in the Preact team and is very likely to be something I'll be working on next.