Bug when mounting/unmounting Payment Elements

[frederichoule]

Describe the bug

When creating, destroying and recreating the Payment Element, we get an error related to getContext() in Payment Elements.

[HMR][Svelte] Unrecoverable HMR error in <LinkAuthenticationElement>: next update will trigger a full reload
logError @ proxy.js?v=1f1e0bb9:15
Show 1 more frame
Show lessUnderstand this error
LinkAuthenticationElement.svelte:17 Uncaught (in promise) TypeError: Cannot destructure property 'elements' of 'getContext(...)' as it is undefined.
    at instance (LinkAuthenticationElement.svelte:17:11)
    at init (chunk-S2NM74UB.js?v=1f1e0bb9:2190:23)
    at new LinkAuthenticationElement (LinkAuthenticationElement.svelte:46:24)
    at createProxiedComponent (svelte-hooks.js?v=1f1e0bb9:341:9)
    at new ProxyComponent (proxy.js?v=1f1e0bb9:242:7)
    at new Proxy<LinkAuthenticationElement> (proxy.js?v=1f1e0bb9:349:11)
    at Array.create_default_slot (+page.svelte:105:11)
    at create_slot (chunk-S2NM74UB.js?v=1f1e0bb9:101:25)
    at create_if_block (Elements.svelte:3:45)
    at create_fragment (Elements.svelte:64:24)

Reproduction

• Clone repo https://github.com/frederichoule/svelte-stripe
• Navigate to https://localhost:5174/examples/payment-element
• Hit the show/hide button

Severity

blocking all usage

Additional Information

No response

[frederichoule]

By forcing Elements.svelte to re-set the context when the variables are updated, it seems to work.

$: setContext('stripe', { stripe, elements });

[frederichoule]

Tentative PR here: #123

[frederichoule]

Hey @joshnuss did you have any chance to look into this, or find a better fix? Thanks

[joshnuss]

Hi @frederichoule!

I'm wondering, what's different in your repo vs this one? Did you change anything?

Because when I try it with the live Svelte PaymentElement example it seems to work OK

[frederichoule]

Did you try my repo? There's a new button in the Svelte PaymentElement example page that says "Hide/Show" and replicates the bug.

The only change to the actual payment element is there:
254b636

Line 71: $: setContext('stripe', { stripe, elements });

[frederichoule]

Hey @joshnuss, the example wasn't in the repo, sorry it's my fault. It is now.

Example: https://github.com/frederichoule/svelte-stripe
Fix: #123

[frederichoule]

Any update @joshnuss ?

[TheRealThor]

I am getting the same error when I use Elements in a multi-step form where the user advances to the payment element step, but goes back and then again to the step with the payment element, then an error is thrown and the app stops working:

Unhandled Promise Rejection: TypeError: Right side of assignment cannot be destructured

The error stems from calling getContext in an element that returns an undefined value.

I rectified the bug by simply adding to the Elements.svelte a onDestroy lifecycle function. When unmounting the Elements component, the elements objects and its contents gets garbage collected.

onDestroy(() => { if (elements) { elements = null; } });

[frederichoule]

Getting ready for production in the next few days, and no update from @joshnuss - so here's what I did to fix it without forking the whole library:

<script lang="ts">
	let stripeElements: StripeElements | null = $state(null);
	const svelteStripeFix = (e: HTMLDivElement) => {
		$effect(() => {
			return () => {
				stripeElements = null;
			};
		});
	};
</script>
<div use:svelteStripeFix>
  <Elements bind:elements={stripeElements}><!-- Elements here //--></Elements>
</div>

Basically, as soon as the div surrounding the Elements is destroyed, we just clear the binded reference to it and then everything works again the next time you mount it in the same payment flow.

Thanks @TheRealThor for pointing me in the right direction!

[joshnuss]

@frederichoule apologies for the delay. I will take a look this week.

[frederichoule]

any progress on that @joshnuss ?

[vamman]

Ran head on into this issue last week thought it was me. Same issues as reported.

For those of you that may be struggling in tabs here's my fix.

	async function initializeStripe() {
		stripe = await loadStripe(PUBLIC_STRIPE_KEY_BASE);
	}
	
	
	function switchTab(tab: string) {
		activeTab = tab;

		if(activeTab === 'Payments') {
			elements = null;
			stripe = null;
			initializeStripe();

		}
	}

If you have a bunch of tabs for the user to cycle through just call switchTab("Payments") where needed.