swiper when using swiper css SSR fails

user_10586800 0
Viewed 757

I'm trying to use swiper (6.8.4) with SSR but building with the CSS making the following problem:

ReferenceError: document is not defined

without swiper CSS the build succeeds but none of the swiper features are working...

here is my code:

import React from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import SwiperCore, { Navigation, Pagination, Mousewheel, Keyboard, Autoplay, Virtual, A11y } from 'swiper'

// swiper bundle styles
import 'swiper/swiper-bundle.min.css'

// swiper core styles
import 'swiper/swiper.min.css'

// modules styles
import 'swiper/components/navigation/navigation.min.css'
import 'swiper/components/pagination/pagination.min.css'

// install Swiper modules
SwiperCore.use([Navigation, Pagination, Mousewheel, Keyboard, Autoplay, Virtual, A11y])

const Carousel = ({ data, renderSlide }) => {
    return (
    <Swiper
      mousewheel
      keyboard
      className="mySwiper"
      slidesPerColumnFill="row"
      touchStartPreventDefault={false}
      watchOverflow
    >
      <div className="swiper-container">
        <SwiperSlide>
          <img src="https://www.imperial-library.info/sites/default/files/Fonts_Alphabets_Magic_Script.png" />{" "}
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://www.imperial-library.info/sites/default/files/Fonts_Alphabets_Magic_Script.png" />{" "}
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://www.imperial-library.info/sites/default/files/Fonts_Alphabets_Magic_Script.png" />{" "}
        </SwiperSlide>
      </div>
    </Swiper>
    )
}

export default Carousel
swiper.js server-side-rendering reactjs
2 Answers
    // Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';

export default () => {
  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={3}
      onSlideChange={() => console.log('slide change')}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  );
};

u need use like this ....

Ref link: https://swiperjs.com/react#installation

user_144750360

Update your swiper version to "swiper": "^7.4.1" and then use the below code.

import React from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import SwiperCore, { Navigation, Pagination, Mousewheel, Keyboard, Autoplay, Virtual, A11y } from 'swiper'

// swiper bundle styles
import 'swiper/swiper-bundle.min.css'

// swiper core styles
import 'swiper/swiper.min.css'

// modules styles
import 'swiper/components/navigation/navigation.min.css'
import 'swiper/components/pagination/pagination.min.css'

// install Swiper modules
SwiperCore.use([Navigation, Pagination, Mousewheel, Keyboard, Autoplay, Virtual, A11y])

const Carousel = ({ data, renderSlide }) => {
    return (
    <Swiper
      mousewheel
      keyboard
      className="mySwiper"
      slidesPerColumnFill="row"
      touchStartPreventDefault={false}
      watchOverflow
    >
        <SwiperSlide>
          <img src="https://www.imperial-library.info/sites/default/files/Fonts_Alphabets_Magic_Script.png" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://www.imperial-library.info/sites/default/files/Fonts_Alphabets_Magic_Script.png" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://www.imperial-library.info/sites/default/files/Fonts_Alphabets_Magic_Script.png" />
        </SwiperSlide>
    </Swiper>
    )
}

export default Carousel
user_176322510
Related