onMounted and onBeforeMounted warning when calling useStripe

[torenware]

When I call useStripe with the code in the example, I get two warnings in the JS console:

15:22:56.127 [Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement. runtime-core.esm-bundler.js:38:16

15:22:56.128 [Vue warn]: onBeforeUnmount is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement. runtime-core.esm-bundler.js:38:16

The calling code is all inside of my own call to onMounted(), except for the import statements you recommend:

• import "@stripe/stripe-js"; is in main.ts.
• The import for your use widget is at the top of <script setup>.

The vue version is 3.2.34, and the vite version 2.2.4.

Not sure if the code is actually not working, since I still haven't wired this into my template.

[frandiox]

The calling code is all inside of my own call to onMounted()

Can you call it directly from setup instead? useStripe is internally calling onMounted and onBeforeUnmount so I guess there's an issue if you call it from onMounted 🤔

[torenware]

I had to track down that version of my code in the repo (git is awesome that you can do that), and I don't see any reason why I would not be able to do that. the actual code looked like this:

onMounted(async () => {
  const params = NewFetchParams();
  params.method = "get";
  const rslt = await fetcher<StripeParams>(`${window.tmpVars.api}/api/sparams`, params);
  if (rslt.error) {
    console.log("cannot load stripe:", rslt.error);
    return;
  }
  console.log("no error", rslt);
  sparams.value = rslt as StripeParams;

  const {
    stripe: stripeObj,
    elements: [cardElement],
  } = useStripe({
    key: sparams.value.key,
    elements: [{ type: 'card', options: {} }],
  });

  stripe.value = stripeObj.value;

});

I believe all of the needed dependencies would indeed be in place by the time <script setup /> runs.

[torenware]

OK, I think I get why it was on onMounted: the stripe-based UI gets inserted into a form, which does not exist before mount time. I could certainly construct the UI earlier, but I'd have to leave it around (probably in a ref) until mount time.