React+NextJS中SwiperJS报Cannot read 'includes'错误求助

问题描述 #

在React与NextJS项目中开发了一个基于SwiperJS的评论组件，但始终遇到错误：Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'includes')。注释该组件全部代码后项目恢复正常，尝试升级package.json中的Swiper版本、降级React均无法解决问题，请求结合代码排查。

组件代码：components/Reviews.jsx #

import React, { useRef, useState, useEffect }  from 'react'
import {ReviewForm} from '../components'
import { FaFacebookSquare, FaGithubSquare, FaTwitterSquare, FaInstagramSquare, FaYoutubeSquare } from 'react-icons/fa'
import {MdOutlineArrowForward} from 'react-icons/md'
import { getReviews } from '../services'  
import { Swiper, SwiperSlide } from "swiper/react";
import moment from 'moment'
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";


// import required modules
import { Pagination, Navigation } from "swiper";

const Reviews = () => {
  const [reviews, setReviews] = useState([]);

  useEffect(() => {
    getReviews()
      .then((newReviews) => setReviews(newReviews))
  }, [])

  return (
    <div className='reviewsBgBlack'>
      <div><h4 className="font-normal py-5 tracking-wide lg:text-5xl md:text-3xl text-center text-[#D72A06]">CLIENTS REVIEWS <span className='text-white'>ABOUT <br />THE QUALITY OF OUR WORK</span></h4></div>
    <Swiper
        slidesPerView={1}
        slidesPerGroup={1}
        spaceBetween={10}
        loop={false}
        loopFillGroupWithBlank={true}
        pagination={{
          clickable: true,
        }}
        breakpoints={{
          640:{
            slidesPerView:2,
            spaceBetween:10
          },
          768:{
            slidesPerView:3,
            spaceBetween:20
          },
          1024:{
            slidesPerView:3,
            spaceBetween:30
          }
        }}
        navigation={true}
        modules={[Pagination, Navigation]}
        className="mySwiper"
      >
        
      {reviews.map((review) => (
      <div key={review.name}>
        <div className="reviewsContainer">
          <div className="content">
            <SwiperSlide><div className="reviewCard">
            
              <div className="reviewCard-content">
                  <div className="image">
                    <img src="/logo.png" alt="" />
                  </div>
                  
                  <div className='media-icons'>
                    <i><a href={`https://www.instagram.com/${review.instagram}`}><FaInstagramSquare /></a></i>
                    <i><a href={`https://www.twitter.com/${review.twitter}`}><FaTwitterSquare /></a></i>
                    <i><a href={`https://www.facebook.com/${review.facebook}`}><FaFacebookSquare /></a></i>
                  </div>

                  <div className="name-profession">
                    <span className="name">{review.name}</span>
                    <span className='profession font-semibold'>{review.profession}</span>
                    <p className="text-gray-400 mb-2 font-semibold text-xs">{moment(review.createdAt).format('MMM DD, YYYY')}</p>
                    <span className="profession">{review.testimonial}</span>
                  </div>

                  <div className={`button ${review.casestudy ? `visible` : `hidden`}`}>
                    <button>view case study<span><MdOutlineArrowForward className='mt-1 text-lg ml-2'/></span></button>
                  </div>
              </div>
              
              </div>
            </SwiperSlide>

          </div>
        </div>
      </div>
      ))}
    </Swiper>
    <ReviewForm />
    </div>
  )
}

export default Reviews

控制台错误信息（中文翻译） #

next-dev.js?3515:20 上述错误发生在<Swiper>组件中：

    at eval (webpack-internal:///./node_modules/swiper/react/swiper.js:43:98)
    at div
    at Reviews (webpack-internal:///./sections/Reviews.jsx:38:62)
    at div
    at div
    at Home (webpack-internal:///./pages/index.jsx:29:23)
    at Layout (webpack-internal:///./components/Layout.jsx:11:26)
    at $704cf1d3b684cc5c$export$9f8ac96af4b1b2ae (webpack-internal:///./node_modules/@react-aria/ssr/dist/module.js:23:64)
    at MyApp (webpack-internal:///./pages/_app.tsx:24:27)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20742)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23635)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:70:9)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:215:26)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:406:27)

React 将尝试使用你提供的错误边界 ErrorBoundary 从头重新创建此组件树。

排查与解决方案 #

1. 修复SwiperSlide的嵌套结构错误 #

Swiper要求SwiperSlide必须是Swiper的直接子元素，不能被多层div包裹。当前代码中reviews.map返回的是div容器，内部嵌套SwiperSlide，这会导致Swiper无法正确识别幻灯片结构，触发内部逻辑错误。

修改后的结构示例：

{Swiper}
  {reviews.map(review => (
    <SwiperSlide key={review.name}>
      <div className="reviewsContainer">
        <div className="content">
          <div className="reviewCard">
            {/* 卡片内容保持不变 */}
          </div>
        </div>
      </div>
    </SwiperSlide>
  ))}

2. 增加数据加载的空值判断 #

确保在数据未加载完成时，不会渲染无效内容，避免潜在的undefined问题：

{reviews.length > 0 && reviews.map(review => (
  // 幻灯片内容
))}

3. 排查SSR兼容性问题 #

NextJS的服务端渲染可能与Swiper存在兼容性冲突，尝试用动态导入禁用SSR：

import dynamic from 'next/dynamic'

const Swiper = dynamic(() => import('swiper/react').then(mod => mod.Swiper), { ssr: false })
const SwiperSlide = dynamic(() => import('swiper/react').then(mod => mod.SwiperSlide), { ssr: false })

4. 简化Swiper配置排查 #

暂时禁用breakpoints、navigation等配置，逐步恢复排查是否是配置项引发的问题：

<Swiper
  slidesPerView={1}
  spaceBetween={10}
  pagination={{ clickable: true }}
  modules={[Pagination]}
  className="mySwiper"
>
  {/* 幻灯片内容 */}
</Swiper>

内容的提问来源于stack exchange，提问作者Chidimma Nworah