HierarchyRequestError when re-rendering ReactBridge with an empty yield

[jembezmamy]

I've got a component that calls ReactBridge and passes an optional block:

{{! my-react-bridge.hbs }}
<ReactBridge
  @reactComponent={{@reactComponent}}
  @props={{@props}}
  @tagName={{@tagName}}
  ...attributes
>
  {{yield}}
</ReactBridge>

I'm invoking it without the block content:

<MyReactBridge @reactComponent={{this.disclaimer}} @props={{hash level=this.level}} />

And it renders fine.

Now, when I update @props, e.g. by changing this.level on click, I get this error:

[tdm] Uncaught error: HierarchyRequestError: Failed to execute 'replaceChild' on 'Node': The new child element contains the parent.
    at eval (yield-wrapper.jsx:17:1)
    at commitHookEffectListMount (react-dom.development.js:23189:26)
    at commitPassiveMountOnFiber (react-dom.development.js:24970:11)
    at commitPassiveMountEffects_complete (react-dom.development.js:24930:9)
    at commitPassiveMountEffects_begin (react-dom.development.js:24917:7)
    at commitPassiveMountEffects (react-dom.development.js:24905:3)
    at flushPassiveEffectsImpl (react-dom.development.js:27078:3)
    at flushPassiveEffects (react-dom.development.js:27023:14)
    at commitRootImpl (react-dom.development.js:26974:5)
    at commitRoot (react-dom.development.js:26721:5)
    at performSyncWorkOnRoot (react-dom.development.js:26156:3)
    at flushSyncCallbacks (react-dom.development.js:12042:22)
    at eval (react-dom.development.js:25690:13)

[jembezmamy]

I don't quite understand where this problem comes from, but I found three solutions:

1. Always pass a block to ReactBridge:

{{! my-react-bridge.hbs }}
<ReactBridge
 @reactComponent={{@reactComponent}}
 @props={{@props}}
 @tagName={{@tagName}}
 ...attributes
>
 <div>{{yield}}</div>
</ReactBridge>

2. Conditionally use block invocation when based on (has-block)

{{! my-react-bridge.hbs }}
{{! @glint-nocheck }}
{{#if (has-block)}}
  <ReactBridge
    @reactComponent={{@reactComponent}}
    @props={{@props}}
    @tagName={{@tagName}}
    ...attributes
  >
    {{yield}}
  </ReactBridge>
{{else}}
  <ReactBridge
    @reactComponent={{@reactComponent}}
    @props={{@props}}
    @tagName={{@tagName}}
    ...attributes
  />
{{/if}}

3. Extend ReactBridge to accept @hasBlock argument

{{#let (element this.tagName) as |Tag|}}
  {{#let (this.or @hasBlock (has-block)) as |hasBlock|}}
    <Tag
      class={{unless @tagName 'react-bridge-wrapper'}}
      data-test-react-bridge-component
      {{! @glint-nocheck }}
      {{reactModifier
        reactComponent=@reactComponent
        props=(transformPropsWithLegacyContent @props)
        providerOptions=@providerOptions
        hasBlock=hasBlock
      }}
      ...attributes
    >
      {{~#if hasBlock~}}
        {{yield}}
      {{/if}}
    </Tag>
  {{/let}}
{{/let}}

Solution 1. is simple but we don't want to always pass a block to ReactBridge - the React component might behave differently depending on whether children are passed or not.

Solution 2. has a some code duplication, which I would prefer to avoid.

That's why I think the best option is Solution 3. - I'm going to submit a PR with this change.

[jembezmamy]

The above solution is a temporary patch. The real root cause is that react-modifier does not correctly detect if a block is passed. We should fix that instead