Conditionally rendered element under fragment in island does not render

[crowlKats]

/** @jsx h */
/** @jsxFrag Fragment */
import { h, Fragment } from "preact";
import { useState } from "preact/hooks";

export default function Component() {
  const [show, setShow] = useState(false);

  return (
    <>
      Hello
      <div onClick={() => setShow(true)}>
        World
      </div>
      {show && (
        <div>I'm not rendered</div>
      )}
    </>
  );
}

This will error with Uncaught (in promise) DOMException: Node.insertBefore: Child to insert before is not a child of this node on the client when World is clicked.

[m4rocks]

I also ran into this issue. Rendering an empty div instead should fix the problem

[psimk]

Based on the error message, the error occurs in createRootFragment. Specifically when preact calls appenChild, which subsequently calls our insert function.

I think part of the issue is related to the way we instantiate the s variable: it is assigned to the nextSibling of the last replaceNode. In other words, s is assigned to the next sibling of the final child of our island component. This happens to be the end tag node, that we use to denote the end of the island component.

This does not seem intentional, as right after we create the root fragment we remove the end tag. Which means that s will always point to a comment element which doesn't exist in the DOM.

---

Moving the instantiation of s into insert fixes the error (psimk/fresh/#bug/root-fragment-in-insland), and @crowlKats's example runs as expected. However, I am not sure why, but preact always calls appendChild. Which results in the conditional part of the component to always be appended to the end.

If we swap the location of the "show" portion of the above example, and run it with the moved s instantiation. The "show" portion will be rendered after <div>World</div>.

/** @jsx h */
/** @jsxFrag Fragment */
import { h, Fragment } from "preact";
import { useState } from "preact/hooks";

export default function Component() {
  const [show, setShow] = useState(false);

  return (
    <>
      {show && (
        <div>I'm not rendered where I should be rendered</div>
      )}
      Hello
      <div onClick={() => setShow(true)}>
        World
      </div>
    </>
  );
}

[TranquilMarmot]

I also ran into this with a "code only" island

For example,

const SomeIsland = () => {
   useEffect(() => {
      console.log("Island in the sun");
   }, []);

  return null; // or return <></>
}

Results in:

Uncaught TypeError: Cannot read properties of undefined (reading 'nextSibling') at createRootFragment

Returning an empty <div /> here works, but it would be nice to not have to pollute the DOM when you just want to run some client-side JS.

[TranquilMarmot]

This bit me again in the same night while trying to use the menu component from @headless-ui/react! See this discussion: #606 (comment)

[rimzudev]

Is there an update or workaround on this? I think I am having a slightly different case with the same problem in fresh@1.1.4. Minimalistic example:

// islands/Show.tsx
import { useState } from "https://esm.sh/preact@10.11.0/hooks";

export default function ShowDiv() {
  const [open, setOpen] = useState(true);

  return (
    <>
      <button onClick={() => setOpen(true)}>
        Open
      </button>
      {open
        ? (
          <div>
            <button
              type="button"
              onClick={() => setOpen(false)}
            >
              Close
            </button>
          </div>
        )
        : null}
    </>
  );
}

I want the div to exist conditionally. Closing it the first time works but opening it in any way always results in:

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at Object.insert ...

[rimzudev]

I just realized, it works by turning the empty tag (<>) into a div (<div>):

// ...
  return (
    <div>
      <button onClick={() => setOpen(true)}>
        Open
      </button>
      {open
        ? (
          <div>
            <button
              type="button"
              onClick={() => setOpen(false)}
            >
              Close
            </button>
          </div>
        )
        : null}
    </div>
  );
}

I hope this helps some people with the same problem or by solving this in general as having the button placed right there without div enclosing it would help me. But maybe this is not even intended. I'll leave the explanation why this works/does not work to someone else. 👀

[azerum]

Am I missing something, or insertBefore() can be implemented as it is - by calling parent.insertBefore()?

function createRootFragment(
  parent: Element,
  replaceNode: Node | Node[],
) {
  replaceNode = ([] as Node[]).concat(replaceNode);

  // @ts-ignore this is fine
  return parent.__k = {
    nodeType: 1,

    parentNode: parent,

    firstChild: replaceNode[0],
    childNodes: replaceNode,

    insertBefore(node: Node, child: Node) {
      parent.insertBefore(node, child);
    },

    appendChild(child: Node) {
      parent.appendChild(child);
    },

    removeChild(child: Node) {
      parent.removeChild(child);
    },
  };
}

I've forked the repository, added this modifications, and all tests run. I've also added test cases for two example comments above. Maybe tests don't tell a complete picture though. See #1172

[iuioiua]

This has been fixed in #1172.