'Unhandled Promise Rejection: Timeout' when using SPA over multiple pages

simon-mundy commented 2 months ago

Describe the bug

My site uses a VanillaJS router to replace HTML within the DOM. I've manually loaded the formie.js files upon page load so subsequently it uses the same instance, and I simply call Formie.initForms(false) to activate each different form.

The problem I'm seeing is that if I load a form (e.g. on a 'contact' page) then navigate to another page with a form (e.g. 'register' page) is that when I submit the latter form it freezes for around 10-12 seconds and then the console emits a 'Unhandled Promise Rejection: Timeout', causing the current form to be inoperable. Only a manual page refresh will reset it.

It's hard to see exactly why/where this is occurring (so hard to debug!) - if I submit the form with errors then it continues to work, it's only when the form has been validated and submitted that the freeze occurs. I can't see any active XHR requests so not sure what is actually timing out. Is there a best-practice way to try and trace the issue?

I'm using the most up-to-date versions of CraftCMS 5 (5.2.5) and Formie (3.0.0-beta.16).

Steps to reproduce

Set up a simple 2 page SPA app
Manually render the Formie JS
Use Formie.initForms(false) to init forms on separate pages

Form settings

Multi-page form: No
Submission Method: Ajax
Client-side Validation: Yes
Custom Form Templates: Yes

Craft CMS version

5.2.5

Plugin version

3.0.0-beta.16

Multi-site?

No

Additional context

No response

simon-mundy commented 1 month ago

Is there anyone reviewing these? I've just paid for this plugin for two sites and both of them are not functioning as expected.

engram-design commented 1 month ago

Sorry, this must've slipped through the cracks. Now the Formie.initForms(false) function is going to initialize every form on the page, and you may prefer to use the Formie.initForm($formElement) call, but that's dependant on your needs. Just thought to flag that in case you have multiple forms on the page which would get re-initialized.

But onto your issue, to help with debugging, you might like to run things in a dev environment with a npm install and npm run dev within the /vendor/verbb/formie folder.

I've just spun up a simple-ish example with a router of sorts to replicate this, but the forms are submitting okay for me. I don't suppose there's a reduced test case you might be able to send through regarding how you are swapping out HTML and initializing forms?

simon-mundy commented 1 month ago

Thanks Josh. I know it’s painful when you have a whole ecosystem set up and finding the one small instance that doesn’t work! I’ll try and set up a smaller standalone test case - even if I host it separatey - and see if I can show you that way.

FWIW I did use the Formie.initForm($formElement) call but still ended up with the same error.

engram-design commented 1 month ago

No problem, I'll keep at it on my end in the meantime to replicate what might be going on.

verbb / formie