Failed to resolve component: swiper

[umnpavel]

Thank you very much, according to your example, we managed to add swiper in quasar ssr + pwa. But after adding the following warning appears:

[Vue warn]: Failed to resolve component: swiper If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. [Vue warn]: Failed to resolve component: swiper-slide If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

When added to quasar.config.js: viteVuePluginOptions: { template: { compilerOptions: { isCustomElement: (tag) =>['swiper', 'swiper-slide'].includes(tag) } } }, It stops working.

Did you manage to solve it?

[DaywisonSilva]

Hello @umnpavel , are you using Vue version 2 or 3?

[DaywisonSilva]

If you are using Vue 3 with Vite js, follow this example: quasar example vite-js

[umnpavel]

Yes, this works, but only in spa mode. I use Vue3, Vite.js and ssr + pwa mode I'm trying to run in ssr + pwa mode. I get this error when I run the command: quasar build -m ssr Error: Error [ERR_REQUIRE_ESM]: require() of ES Module C:\*\domains\quasar-swiper-vite-example\dist\ssr\node_modules\swiper\vue\swiper-vue.js from C:\*\domains\quasar-swiper-vite-ex ample\dist\ssr\server\server-entry.js not supported. Instead change the require of swiper-vue.js in C:\*\quasar-swiper-vite-example\dist\ssr\server\server-entry.js to a dynamic import() which is available in all CommonJS modules. at Module.<anonymous> (C:\*\domains\quasar-swiper-vite-example\dist\ssr\server\server-entry.js:1:238) at Object.<anonymous> (C:\*\domains\quasar-swiper-vite-example\dist\ssr\index.js:1:1232) { code: 'ERR_REQUIRE_ESM' }

Therefore, you have to connect via boot (https://quasar.dev/quasar-cli-webpack/boot-files), as in your other example https://github.com/DaywisonSilva/quasar_swiper_example/tree/main/src/boot

quasar.config.js: boot: [ 'i18n', 'axios', {path: 'swiper', server: false,}, ],

And it works great, apart from the warning: [Vue warn]: Failed to resolve component: swiper If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. [Vue warn]: Failed to resolve component: swiper-slide If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

Thanks for the feedback