使用 swiper css SSR 时 swiper 失败

Question

我尝试将 swiper (6.8.4) 与 SSR 一起使用，但使用 CSS 构建会出现以下问题：

ReferenceError：文档未定义

如果没有 swiper CSS，构建会成功，但所有 swiper 功能都不起作用......

这是我的代码：

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

Answer 1

    // 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>
  );
};

你需要这样使用......

参考链接： https: //swiperjs.com/react#installation