Static site generation with Vue causes SyntaxError: Cannot use import statement outside a module

[liborjelinek]

Has anybody already integrate PrimeVue (https://primevue.org) with Vike for SSG? My app works works great on "npm run dev", but for "npm run build" it causes SyntaxError: Cannot use import statement outside a module.

For example, when I try to generate page containing Button:

...
vike v0.4.142 pre-rendering HTML...
(node:65063) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/Users/matt/git-dm/www/.my/blank-vue/node_modules/primevue/button/button.esm.js:1
import Badge from 'primevue/badge';
^^^^^^

SyntaxError: Cannot use import statement outside a module

[brillout]

It's a classic CJS/ESM issue and there are usually multiple ways to work around it.

Create a minimal reproduction (that doesn't use pre-rendering) and I'll dig into it.

[liborjelinek]

I will prepare it! Thank you so much. In the meanwhile: how it is even possible that the same code is behaving differently on npm run and build?

[brillout]

See comment at the end of the readme of my fork of your reproduction.

[liborjelinek]

Here you go https:/mattwarrick/vike-primevue. npm run dev is okay, the error appears only on npm run build (Vike instructed to prerender).

Specifically, have a look if I add PrimeVue correctly.

Thank you so much!

[brillout]

Improved reproduction: https:/brillout/vike-primevue.

The workaround is this.

[brillout]

Btw. would your company be up for sonsoring?

[liborjelinek]

Thank you! I will never ever figure it out myself. It is too much black magic.

Ad sponsoring. I am just evaluating Vue.js SSGs area for side project of small website with a handful of marking pages only. Vike looks like powerful full-fledged SSR. But maybe I look for more Vue and SSG centered tool. Leverage existing Vue.js with Vue Router and produce static HTML files. (I dislike Nuxt since it is very slow and black box.)

[brillout]

Makes sense 👍

I will never ever figure it out myself. It is too much black magic.

I agree; it's quite an unfortunate situation that many packages publish wrong ESM/CJS code. (FYI I'm pushing the Vite team to automatically apply workarounds such as ssr.noExternal, so that everything works seamlessly for the user.)