React DOMException when setting undefined

[chester23491]

Uncaught DOMException in React

We are getting a Uncaught DOMException in React, when we are setting undefined in the Baloise components at runtime.

Message:

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at removeChild (http://localhost:3000/static/js/bundle.js:24925:22)
    at commitDeletionEffectsOnFiber (http://localhost:3000/static/js/bundle.js:37642:19)
    at commitDeletionEffects (http://localhost:3000/static/js/bundle.js:37591:9)
    at recursivelyTraverseMutationEffects (http://localhost:3000/static/js/bundle.js:37866:13)
    at commitMutationEffectsOnFiber (http://localhost:3000/static/js/bundle.js:37953:13)
    at recursivelyTraverseMutationEffects (http://localhost:3000/static/js/bundle.js:37880:11)
    at commitMutationEffectsOnFiber (http://localhost:3000/static/js/bundle.js:37939:13)
    at recursivelyTraverseMutationEffects (http://localhost:3000/static/js/bundle.js:37880:11)
    at commitMutationEffectsOnFiber (http://localhost:3000/static/js/bundle.js:37900:13)
    at recursivelyTraverseMutationEffects (http://localhost:3000/static/js/bundle.js:37880:11)
The above error occurred in the <Text> component:
    at bal-text
    at m (http://localhost:3000/static/js/bundle.js:2384:7)
    at BalText
    at bal-card
    at m (http://localhost:3000/static/js/bundle.js:2384:7)
    at BalCard
    at main
    at bal-app
    at m (http://localhost:3000/static/js/bundle.js:2384:7)
    at BalApp
    at App (http://localhost:3000/static/js/bundle.js:1452:76)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Detailed description

const [foo, setFoo] = React.useState<string | undefined>("foo");
return (
<BalText>{foo}</BalText>
<BalButton
  onClick={
    // setting is not working -> leads to Uncaught DOMException
    () => setFoo(undefined)
  }
>
  Set Undefined
</BalButton>
);

Steps to reproduce the issue

1. Add the code snipplet into your system or clone the following fork with branch: create example of setting component undefined baloise/design-system-examples#6
2. Open browser console
3. Click on "Set Undefined", page is going blank, check console

Additional information

• Production bug for BAT project

[hirsch88]

Hi @chester23491 please use the state in the text like that

<BalText><>{foo}</></BalText>

because otherwise you are pushing an undefined to a child directly.

[chester23491]

Hey @hirsch88, thank you for the quick response. Did you try it out? I'm getting still this error. The error exist in all react components. Also when we set string empty I'm are getting this error.

[chester23491]

Hi @hirsch88

Thank you for your time. I tried to reproduce the issue in the ionic-framework react test app (https://github.com/ionic-team/ionic-framework/tree/main/packages/react/test-app). Setting the components empty or undefined is working fine. I was not able to reproduce it there.

const Main: React.FC<MainProps> = () => {
  const [foo, setFoo] = React.useState<string | undefined>('foo');

  return (
    <IonPage>
      <IonText>{foo}</IonText>
      <IonButton onClick={() => setFoo(undefined)}>Set Undefined</IonButton>
      <IonButton onClick={() => setFoo('')}>Set Empty</IonButton>
      <IonButton onClick={() => setFoo('Bar')}>Set Bar</IonButton>
      <IonButton onClick={() => setFoo(' ')}>Set Whitespace</IonButton>
    </IonPage>
  );
};

Can you please update as discussed the react-component-lib?

Regards,
Charles