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