Reputation: 315

Swiper Js cannot read properties of undefined ('reading includes)

I have this component I wrote for reviews using swiperjs in a react and nextjs project but I have been getting an error with seems to be coming from this reviews component saying Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'includes') I can't figure out why but when I comment out all the code in that component, everything seems to work fine. I have also tried upgrading swiper in package.json and also tried downgrading react but the error will not go away. Please help me figure out what I could be doing wrong using the code below

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

console error

next-dev.js?3515:20 The above error occurred in the <Swiper> component:

    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 will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

Upvotes: 0