I get a compile error when using vite-ssg

[ghost]

[Vue Router warn]: uncaught error during route navigation:
file:///Users/nn/Work/mf-products/.vite-ssg-temp/assets/index-df334bb5.js:15
import { StripeElements, StripeElement } from "vue-stripe-js";
                         ^^^^^^^^^^^^^
SyntaxError: Named export 'StripeElement' not found. The requested module 'vue-stripe-js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'vue-stripe-js';
const { StripeElements, StripeElement } = pkg;

Can you please take a look at this and let me know what's the work-around until fixed?

[ghost]

Update, what worked for me, but unfortunately can't do this for prod is following:

• Update your package.json to have "type": "module"

[timramseyjr]

I am having the same issue using vite ssr. @nenadnovakovic-sh did you ever figure out a solution?

[softbeehive]

Hi there,

Starting from v2.0.0 its type is module. I haven't had a chance to test server side rendering yet. You can certainly import it now. However, there are bits that will potentially break. Stripe.js is a client-first library, so it attaches itself to window. And vue-stripe-js relies on that.

I have been thinking about globalThis instead. If you can mark StripeElements and StripeElement to render as client components, they should work as expected.

Summarizing:

• potential issue with Window
• hydration issues with stripe dom element?

[softbeehive]

v2.0.0 works with Nuxt 3 and my best guess for vite-ssg - wrap it with <ClientOnly> and see what happens. Feel free to report other issues or reopen this