search

mollie / components-examples

Examples and reference implementations for Mollie Components
13 stars 6 forks source link

[Vue] Not all required components are mounted - on second load #24

Closed andyslack closed 2 years ago

andyslack commented 2 years ago

Hi Guys,

I have an issue with implementing components into a Vue application.

On first load everything works fine, however if the user navigates to another route and then back again, the form is passing this error on submission:

Not all required components are mounted, see https://docs.mollie.com/guides/mollie-components/reference for more info.

I have tried everything to get this working, including re-mounting the components (but they are already mounted).

For now, I have a very dirty hack that if they get this error I do a location.reload() but I could really do with a proper fix for this.

Here is a loom recording: https://www.loom.com/share/34b681a889e647af949d7269b348a5ed

Attached are some screenshots, or you can see this in the real world here: BlackWolf Checkout Screenshot 2022-08-05 at 08 52 37 Screenshot 2022-08-05 at 08 52 51

shershen08 commented 2 years ago

What we have discovered is that every time the page/component with the payment form is opened within the same session - Mollie library script creates a div.mollie-components-controller in the HTML - it contains an iframe probably for initializing the secure payment gateway etc. But this tag resides outside the scope of the Vue app - which means it is not cleared when the user is navigating away or for example closing the form block.

So if you come across situations when your form may be hidden and shown multiple times you have to manually check for this tag and clean this up before initializing again.

screenshot_2022-08-05_at_15 17 21

I would hope this check or some other mitigation will be someday added to the Mollie.js library.

doskarj commented 2 years ago

Hey, happy to get you an update on this @andyslack.

A bug on our end most likely caused this. Unmounting was fixed in the last release. I would advise you to unmount all Mollie components during the beforeUnmount and mount them again during the onMounted lifecycle event of Vue.

We are also preparing yet another fix, that will unmount Mollie components automatically when they are removed from DOM. However, we still advise developers to unmount Mollie components themselves.

Do not hesitate to reach us again, if you are still experiencing this or any other issue.

doskarj commented 2 years ago

Thank you for reporting this @shershen08.

This is most likely not connected with the issue that andyslack is experiencing. However, I created a new issue report for this while we are looking into it.

doskarj commented 2 years ago

We just release a fix, that will automatically unmount Mollie components when they are removed from DOM. This was mentioned in https://github.com/mollie/components-examples/issues/24#issuecomment-1267100539.