reinitialize causes DOMException for missing or moved child node on Chrome Browser

[4lki]

trafficstars

The error occurs, whenever the order config gets updated and is caused by the reinitialize function.

As an error example i point to the project-demo at https://enngage.github.io/ngx-paypal/. Just change the Dollar amount of the order and get this: ERROR DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in response to a mutation? The error is kind of odd, because it removes the child node as expected, but still throws an error. So as a workaround just catching the error works.

Deps: Angular 11 ngx-paypal 6.2.0

[4lki]

Update The error seems to only be occurring on Chromium based Browsers (Tested in Chrome and Android WebView).

[huntonas]

I am also seeing this is Chrome but not Firefox. Any updates?

[huntonas]

@4lki I am catching the error, but the btn is still going away. Any chance you can give an example of how you are handling it?

[4lki]

@huntonas Ok, my first hotfix was to alter this:

if (this.payPalButtonContainerElem) {
                while (this.payPalButtonContainerElem.nativeElement.firstChild) {
                    this.payPalButtonContainerElem.nativeElement.removeChild(this.payPalButtonContainerElem.nativeElement.firstChild);
                }
            }

into this :

if (this.payPalButtonContainerElem) {
                try{
                    while (this.payPalButtonContainerElem.nativeElement.firstChild) {
                        this.payPalButtonContainerElem.nativeElement.removeChild(this.payPalButtonContainerElem.nativeElement.firstChild);
                    }
                }catch(e){}
            }

on line 313 of ngx-paypal.js

...but since i didn't want to fork this repo and maintain my hotfix, i found a template based solution:

By not updating the component config, but recreating it with an ngIf Clause it never calls for reinitialize():

<ngx-paypal ngIf="payPalConfig" (scriptLoaded)="scriptLoaded($event)" [config]="payPalConfig"></ngx-paypal>

then simply set your payPalConfig to undefined first, to clear it from view before updating your payPalConfig.

updateConfig(config:any){
    this.payPalConfig = undefined;
    setTimeout(x => {
      this.paypalConfig = config;
    },200)
  }

Hope this helps

[daniel-ilan]

I am getting the exact same issue, thanks for the solution. This needs to be resolved by the maintainers of this library

[Slooti]

+1 - would appreciate a fix for this very much!