bug: Failed to execute 'removeChild' on 'Node'

[jeco123]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

2.14.1

Current Behavior

I created a simple web component without parameters but with a slot inside using stencil. This component is bundled using the @stencil/react-output-target package (0.3.1).

@Component({
  tag: 'tds-grid',
})
export class Grid {
render() {
  return (<div>
    <slot />
  </div>
);

When the children of the component change dynamically, we got the Failed to execute 'removeChild' on 'Node' error.

This issue has been listed in the ionic-framework projet and is reproductible with stencil.
ionic-team/ionic-framework#18782

Expected Behavior

=> should not generate a fatal error and content must be rerender without crashing.

Steps to Reproduce

1. Create a web component as describe in the current behaviour section
2. Generate this component for react using the @stencil/react-output-target package
3. Create a react application, import the generated react component and try to update the content of this component dynamically as it is described in the ionic framework issue bug: @ionic/react: ion-slides: Failed to execute 'removeChild' on 'Node' ionic-framework#18782

Code Reproduction URL

this code is easily reproductible => ionic-team/ionic-framework#18782

Additional Information

No response

[rwaskiewicz]

Hey @jeco123 👋

Thanks for the bug report. Could you do me a favor and please create a minimal reproduction case for the team to pull down? While I understand that this appears to be the same as ionic-team/ionic-framework#18782, it'd be great to have something that's both 1) able to be quickly pulled down by the team without having to recreate the scenario by hand 2) using recent versions of the libraries involved. Thanks!

[jeco123]

Hi @rwaskiewicz

I'm gonna create a mono repo with a simple case.

Regards,

Jérôme

[jeco123]

Hi guys, here is my repo => https://github.com/jeco123/stencilbug.git

[jeco123]

Just to add more info #2259

[danielleroux]

I'm facing the same issue.

I have a dropdown and dropdown-item as stencil webcomponent. I used the react-output-target to generate wrapper for react.
The component MyDropdown and MyDropdownItem is scoped=true but shadow=false.

example usage:

<div>
    <input
        type={'text'}
        onInput={(e) => setSearch((e.target as HTMLInputElement).value)}
    />
</div>
<MyDropdown>
    {items.filter(item => item.includes(search)).map(item => <MyDropdownItem key={item}  label={item} />)}
</MyDropdown>

if i start typing into the input field i get Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

[jeco123]

Can you try to wrap your dropdown item into a div for exemple just to see if you have still the error ?I had another pb with vuejs, and wrapping that made my slot working!

[danielleroux]

Sadly not. Its resulting into the same problem

<div>
    <input
        type={'text'}
        onInput={(e) => setSearch((e.target as HTMLInputElement).value)}
    />
</div>
<MyDropdown>
    {items.filter(item => item.includes(search)).map(item => <div key={item}><MyDropdownItem  label={item} /></div>)}
</MyDropdown>

If i enable the shadow dom on the MyDropdown its working, but for now its no option for us. I'm not so deep inside the technical implementation why shadow dom has so much affect into rendering slots 🤔

[jeco123]

Hi guys, any news about this subject ? Regards, Jérôme

[ammanvedi]

Seeing the same issue when shadow dom is disabled. Adding a child div seems to work for now.

As far as i see

1. web component mounts in react

<mycomponent>
    <reactchild />
</mycomponent>

at this point this is the view react has of this in its virtual dom

2. the web component mounts and may create extra divs between

<mycomponent>
    <div class="content-wrapper">
        <reactchild />
     </div>
</mycomponent>

this is the actual DOM, the view react has, has not changed since 1.

3. some change happens that causes to unmount
4. react expects to find reactchild at selector mycomponent > reactchild
5. element cannot be found becuase webcomponent has created intermediate markup

[rwaskiewicz]

The fix for this issue has been released as a part of today's Stencil 4.9.0 release under the experimentalSlotFixes flag (docs).

[jeco123]

@rwaskiewicz,

Hi guys, i updated my repo with the stencil 4.12.1 release. The bug is already there… Did i miss something in the stencil config?

[rwaskiewicz]

@jeco123 can you do me a favor and verify that experimentalSlotFixes is enabled in your Stencil config and that the issue is occurring in components that use scoped: true?

[jeco123]

@rwaskiewicz,

Here is the stencil config https://github.com/jeco123/stencilbug/blob/main/packages/web-components/stencil.config.ts.

export const config: Config = {
  namespace: 'web-components',
  extras: {
    experimentalSlotFixes: true,
  },
…

And here is the component https://github.com/jeco123/stencilbug/blob/main/packages/web-components/src/components/grid/Grid.tsx

import { Component, h } from '@stencil/core';

@Component({
  tag: 'my-grid',
})
export class Grid {
  render() {
    return (
      <div class="grid">
        <slot />
      </div>
    );
  }
}

[rwaskiewicz]

Ah, okay - the lack of an encapsulation mode is the reason you're still seeing this. You need to set scoped: true or shadow: true in the @Component decorator for this fix to be applied