Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error “Component could not mount. Root node was not found”

See original GitHub issue

Describe the bug Error “Component could not mount. Root node was not found”

We are getting this error rendering the dropin component, we are using react 17.0.2, the dropin is not showing because this error are happening several times, this is our code:

    let dropin;
    let dropinMountFailed = false;

    const AdyenCheckout = (await import('@adyen/adyen-web')).default;
    const checkout = new AdyenCheckout(configuration);
    dropin = checkout.create('dropin').mount(dropinContainer.current);  

    try {
      dropin = checkout.create('dropin').mount(dropinContainer.current);
    } catch (e) {
      const endPaymentRenderTime = Date.now();
      const totalRenderTime = endPaymentRenderTime - startPaymentRenderTime;
      dropinMountFailed = true;
    }
    if (dropinMountFailed) {
      try {
        dropin = checkout.create('dropin').mount('#dropin-payment-container');
      } catch (e) {
        console.log(e)
      }
    }

    setDropin(dropin);

We are sure that the issue is on this line: const dropin = checkout.create('dropin').mount(dropinContainer.current);

because if the dropinContainer.current is null the error will show us. So, we added some validations in order to render in because is wrong but it didn’t work

    let dropin;
    let dropinMountFailed = false;

    try {
      dropin = checkout.create('dropin').mount(dropinContainer.current);
    } catch (e) {
      const endPaymentRenderTime = Date.now();
      const totalRenderTime = endPaymentRenderTime - startPaymentRenderTime;

      dropinMountFailed = true;
    }

    if (dropinMountFailed) {
      try {
        dropin = checkout.create('dropin').mount('#dropin-payment-container');
      } catch (e) {
        console.log(e)
      }
    }

How can we fix this error?

NOTE: The code above is all the stuff that we are using.

Expected behavior Never see the error Error “Component could not mount. Root node was not found” on console and the droping component rendering successfully.