React 18 Strict Mode extra iframes

[impaler]

We have seen this issue where React 18 and the <React.StrictMode/> using the latest 0.5.0 of this library produce an extra iframe to be added to the DOM on subsequent re-renders of the components.

• This is only happening when navigating back and forth inside react-router routes
• It never happens when the Chargebee components first render, refreshing the page the expected iframes work fine again
• Without <React.StrictMode/> we cannot reproduce the issue, the tell was the production build didn't show the extra iframe

@cb-dinesh Searching this repo the check suggested here may actually be needed?

https://github.com/chargebee/chargebee-js-wrappers/pull/88/files#diff-6b55b160538cf712c4aeba71ac8cfd6abb5d3faf549fbc5f8eae35d3d73ea0e6

Seems the closing solution expects the destroy() to solve the handling of iframes removal etc? https://github.com/chargebee/chargebee-js-wrappers/commit/d4f8404e3e2fcdbdab702184ecab26c0dcf22675#diff-6b55b160538cf712c4aeba71ac8cfd6abb5d3faf549fbc5f8eae35d3d73ea0e6R46. I not positive this issue is related, forgive me it's hard to create an isolated example that shows the issue easily.

Maybe this issue will save time from someone else searching. Thanks.

[damyco]

Same here in Next.js, component will render twice: