Swiper Vue component not working with Vue3+Nuxt3 SSR

[Christopher-Hayes]

Hi, I'm using a fairly fresh tech stack - Vue3 SSR + Nuxt3 + Vite. I'm having trouble getting Swiper running. I always see the following errors in terminal, whether it's functioning or not:

 WARN  [SSR] Error transforming ./node_modules/swiper/swiper.esm.js: Error: Missing "./swiper.esm.js" export in "swiper" package
 WARN  [SSR] Error transforming ./node_modules/swiper/swiper.scss: Error: Missing "./swiper.scss" export in "swiper" package
 WARN  [SSR] Error transforming ./node_modules/swiper/modules/navigation/navigation.scss: Error: Missing "./modules/navigation/navigation.scss" export in "swiper" package
 WARN  [SSR] Error transforming ./node_modules/swiper/modules/pagination/pagination.scss: Error: Missing "./modules/pagination/pagination.scss" export in "swiper" package
 WARN  [SSR] Error transforming ./node_modules/swiper/modules/scrollbar/scrollbar.scss: Error: Missing "./modules/scrollbar/scrollbar.scss" export in "swiper" package

I started with the demo code here: https://swiperjs.com/vue#usage second code example under "Usage". Swapped css for scss.

If I start on one page of my site, then navigate via Vue Router to the page with the Swiper component, it seems to work perfectly. I still see the above errors in console, but they don't seem to matter. If I instead load the page with the Swiper component first, Vue breaks and will not load the page. It shows the following error:

In console I see:

[Vue warn]: Unhandled error during execution of setup function 
  at <Swiper class="-m-4" modules= [ undefined, undefined, undefined, undefined ] slides-per-view=4  ... >
mod is not a function
  at file://./node_modules/swiper/core/core.js:84:7  
  at Array.forEach (<anonymous>)  
  at new Swiper (file://./node_modules/swiper/core/core.js:83:20)  
  at initSwiper (file://./node_modules/swiper/vue/init-swiper.js:5:10)  
  at setup (file://./node_modules/swiper/vue/swiper.js:519:23)  
  at callWithErrorHandling (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6599:22)  
  at setupStatefulComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6225:29)  
  at setupComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6181:11)  
  at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:198:17)  
  at Module.ssrRenderComponent (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:623:12)

Any ideas? I had trouble finding if Swiper Vue support is just Vue2 at the moment or if it's something with my setup that's breaking the component.

[Christopher-Hayes]

It appears to be module related. That error from core.js, is of this code:

    const allModulesParams = {};
    swiper.modules.forEach(mod => {
      mod({
        swiper,
        extendParams: moduleExtendParams(params, allModulesParams),
        on: swiper.on.bind(swiper),
        once: swiper.once.bind(swiper),
        off: swiper.off.bind(swiper),
        emit: swiper.emit.bind(swiper)
      });
    }); // Extend defaults with modules params

After I removed any module use from my component, it's working without any errors. I'd still welcome fixes for the issue, since I'd like to use Swiper modules still.

[Christopher-Hayes]

Using relative links directly to the module script files got everything working again.

// import Swiper core and required modules
// import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
import Navigation from '../../node_modules/swiper/modules/navigation/navigation';
import Pagination from '../../node_modules/swiper/modules/pagination/pagination';
import Scrollbar from '../../node_modules/swiper/modules/scrollbar/scrollbar';
import A11y from '../../node_modules/swiper/modules/a11y/a11y';

[Christopher-Hayes]

NVM, still doesn't work. Component renders correctly, but it breaks vue/nuxt behind the scenes. Vue Router stops working and unable to navigate away from page.

[awacode21]

Did you find any solution?

i also have problems with Swiper, Vue and SSR:

12:29:01 AM: rendering chunks...
12:29:01 AM: dist/server/entry-server.js   180.72 KiB
12:29:01 AM: /opt/build/repo/dist/server/entry-server.js:32
12:29:01 AM: var swiper = require("swiper");
12:29:01 AM:              ^
12:29:01 AM: Error [ERR_REQUIRE_ESM]: require() of ES Module /opt/build/repo/node_modules/swiper/swiper.esm.js from /opt/build/repo/dist/server/entry-server.js not supported.
12:29:01 AM: Instead change the require of swiper.esm.js in /opt/build/repo/dist/server/entry-server.js to a dynamic import() which is available in all CommonJS modules.
12:29:01 AM:     at Module.<anonymous> (/opt/build/repo/dist/server/entry-server.js:32:14)
12:29:01 AM:     at Object.<anonymous> (/opt/build/repo/prerender.js:13:20) {
12:29:01 AM:   code: 'ERR_REQUIRE_ESM'
12:29:01 AM: }
12:29:01 AM: 

[Christopher-Hayes]

I ended up switching away onto other stuff, so it never saw production. But, I think I had it at least partially working. iirc, I had the base Swiper component working, it was just that Swiper modules wouldn't work.

I'll share some of the config if it helps, but I can't at this point remember exactly what I did.

In the Vue component that needs the slider I had:

import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper styles
import 'swiper/scss';
import 'swiper/scss/navigation';
import 'swiper/scss/pagination';
import 'swiper/scss/scrollbar';

Swiper version - package.json

"swiper": "^7.3.1",

I still did get SSR Errors in my console running npm run dev, not sure if this would actually work on a server.