[Bug?]: Hydration error when accessing element attribute from props

[gar1t]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

This issue falls under the general banner of this error message:

Hydration Mismatch. Unable to find DOM nodes for hydration key

There are many causes of this error message but this report is specific to accessing an element attribute of props. For example, props.children && ..., if (props.children) { ... }, etc.

I've created a minimal case to reproduce it in this repo:

https://github.com/gar1t/reproduce-solid-hydration-error

This is the offending code:

import { JSXElement } from "solid-js";

function Foo(props: { children?: JSXElement }) {
  // The reading of props.children causes this error
  return props.children && props.children;

  // The workaround is this:
  //
  //   return "children" in props && props.children;
}

export default function App() {
  return (
    // This causes error shown in error.png
    <Foo>
      <div>Hello</div>
    </Foo>

    // These uses do not cause the error:
    //
    //   <Foo>Hello</Foo>
    //   <Foo><>Hello</></Foo>
  );
}

Expected behavior 🤔

I'd expect to be able to access an element from props to see if it's defined vs undefined/null without an error.

Steps to reproduce 🕹

In a terminal:

$ git clone https://github.com/gar1t/reproduce-solid-hydration-error.git
$ cd reproduce-solid-hydration-error
$ npm i
$ npm run dev

Open the link - the error should be displayed.

Context 🔦

The scenario is that I want to render a block that's conditional on an attribute being defined in props. This can be simply using something like <Show when={props.someElement}>...</Show>.

Your environment 🌎

[gar1t]

I think this shows my lack of familiarity with the internals of how the props arg is constructed. It looks like its attributes are all getters and in the case of a component, the component function is called. So props.children && props.children (or any similar check of a property that returns a component) calls the component function twice.

So I think my report of this as a bug is spurious - though my surprise is real enough ;)

The use of "children" in props && props.children does.