question-mark

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

Issue Description

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.

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:10 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
asfocommented, Aug 5, 2021

See the example in this project:

https://github.com/adyen-examples/adyen-react-online-payments

Hope this can help you more.

0reactions
H4ckint0shcommented, Mar 10, 2022

I am getting the same issue and it does not matter if i use a reference or id.

Read more comments on GitHub >

github_iconTop Results From Across the Web

preact render TypeScript Examples - ProgramCreek.com
querySelector(domNode) : domNode; if (!node) { throw new Error('Component could not mount. Root node was not found.'); } if (this.
Read more >
[PW-5457] Unable to process binding "afterRender - bytemeta
Uncaught Error: Unable to process binding "afterRender: function(){return ... Message: Component could not mount. Root node was not found. at t.e.mount ...
Read more >
[PW-6019] Add option to easily provide `additionalData ...
HOT 1; Plugin update fails due to composer restraints HOT 3; JS Error when trying to complete order: Component could not mount. Root...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found