Using breakpoints option in Next JS causes Hydration error #5784

Sakkhor909 · 2022-06-08T18:25:17Z

Discussed in #5776

^{Originally posted by Sakkhor909 June 7, 2022}
First of all, thank you for this amazing library.

Everything works fine until I use breakpoints

import { Swiper, SwiperSlide } from "swiper/react";
import Image from "next/image";

 <Swiper

        slidesPerView={1}

        breakpoints={{
          1024: {
            slidesPerView: 3,
          },
        }}
 
      >
        {Data.images.map((imgSrc, index) => {
          return (
            <SwiperSlide>
              <Image src={imgSrc} alt={Data.name + index} layout="fill" />
            </SwiperSlide>
          );
        })}
      </Swiper>

The error is shown on the next js page

Error: Hydration failed because the initial UI does not match what was rendered on the server.

The text was updated successfully, but these errors were encountered:

AbdushukurRasulov · 2022-06-12T20:21:00Z

Than same issue with me also

Jared0430 · 2022-06-15T18:48:44Z

Same here

iampawan31 · 2022-06-15T20:34:10Z

I am also facing the same issue.

ssandlan · 2022-06-16T11:40:35Z

Same issue

iampawan31 · 2022-06-16T15:16:32Z

Using slidesPerView="auto" fixed the issue for me.

Sample Code for reference

<Swiper
        spaceBetween={10}
        slidesPerView="auto"
        breakpoints={{
          320: {
            slidesPerView: 1,
            spaceBetween: 30,
          },
          640: {
            slidesPerView: 1,
            spaceBetween: 10,
          },
          768: {
            slidesPerView: 2,
            spaceBetween: 20,
          },
          1024: {
            slidesPerView: 3,
            spaceBetween: 30,
          },
        }}
      >
              <SwiperSlide>Slide one</SwiperSlide>
      </Swiper>

laurenskling · 2022-06-23T09:01:34Z

This actually makes sense. Your static build created the HTML without a screensize, so the default settings are run. When your JS runs for the first time, it will consider breakpoints, thus creating a mismatch in HTML elements.

Sakkhor909 · 2022-06-26T11:47:27Z

Using slidesPerView="auto" fixed the issue for me.

Sample Code for reference

<Swiper
        spaceBetween={10}
        slidesPerView="auto"
        breakpoints={{
          320: {
            slidesPerView: 1,
            spaceBetween: 30,
          },
          640: {
            slidesPerView: 1,
            spaceBetween: 10,
          },
          768: {
            slidesPerView: 2,
            spaceBetween: 20,
          },
          1024: {
            slidesPerView: 3,
            spaceBetween: 30,
          },
        }}
      >
              <SwiperSlide>Slide one</SwiperSlide>
      </Swiper>

Thank you for the solution. It works.

jordanlambrecht · 2022-07-07T19:17:58Z

Using slidesPerView="auto" fixed the issue for me.
Sample Code for reference

<Swiper
        spaceBetween={10}
        slidesPerView="auto"
        breakpoints={{
          320: {
            slidesPerView: 1,
            spaceBetween: 30,
          },
          640: {
            slidesPerView: 1,
            spaceBetween: 10,
          },
          768: {
            slidesPerView: 2,
            spaceBetween: 20,
          },
          1024: {
            slidesPerView: 3,
            spaceBetween: 30,
          },
        }}
      >
              <SwiperSlide>Slide one</SwiperSlide>
      </Swiper>

Thank you for the solution. It works.

I want to have a bit of the next slide peaking on the screen, so slidesPerView=auto won't work for me- any other ideas or possible fixes you came up with?

Sakkhor909 · 2022-07-12T06:36:57Z

At the moment, No

AbdushukurRasulov · 2022-07-12T06:45:33Z

<div className="relative w-full lg:mx-auto lg:max-w-7xl">
          <Swiper
            slidesPerView={3}
            spaceBetween={20}
            breakpoints={{
              768: {
                slidesPerView: 4,
                spaceBetween: 20,
              },
              1024: {
                slidesPerView: 5,
                spaceBetween: 10,
              },
              1280: {
                slidesPerView: 6,
              },
              1440: {
                slidesPerView: 7,
              },
            }}
          >
            {[...Array(7).keys()].map((item) => (
              <SwiperSlide key={item}>
                Slide {item}
               </SwiperSlide>
            ))}
          </Swiper>
        </div>

This is my solution. I have used Tailwind CSS, and wrapped Swiper with one more div, and gave width: 100%.
it works ok

alimasha-design · 2022-07-25T15:38:22Z

Using slidesPerView="auto" fixed the issue for me.

Sample Code for reference

<Swiper
        spaceBetween={10}
        slidesPerView="auto"
        breakpoints={{
          320: {
            slidesPerView: 1,
            spaceBetween: 30,
          },
          640: {
            slidesPerView: 1,
            spaceBetween: 10,
          },
          768: {
            slidesPerView: 2,
            spaceBetween: 20,
          },
          1024: {
            slidesPerView: 3,
            spaceBetween: 30,
          },
        }}
      >
              <SwiperSlide>Slide one</SwiperSlide>
      </Swiper>

Great Solution.
Many thanks for giving your valuable time to fix it.

laurenskling · 2022-07-25T18:44:36Z

Just want to clarify here, slidesPerView="auto" is not a fix, it's a workaround.

moinulmoin · 2022-08-18T11:50:01Z

slidesPerView="auto" also resolved my issue. thanks @iampawan31

vicasas · 2022-10-10T14:20:27Z

If you decide to use slidesPerView="auto" you have to take into account that you have to control the CLS (Web Vitals) since doing this causes the images to move, in the first render they will be loaded automatically while in the next one it will exist a design change.

MuharremGonel · 2022-10-26T23:12:22Z

Using slidesPerView="auto" fixed the issue for me.

Sample Code for reference

<Swiper
        spaceBetween={10}
        slidesPerView="auto"
        breakpoints={{
          320: {
            slidesPerView: 1,
            spaceBetween: 30,
          },
          640: {
            slidesPerView: 1,
            spaceBetween: 10,
          },
          768: {
            slidesPerView: 2,
            spaceBetween: 20,
          },
          1024: {
            slidesPerView: 3,
            spaceBetween: 30,
          },
        }}
      >
              <SwiperSlide>Slide one</SwiperSlide>
      </Swiper>

Thank you for the solution. It works.

sandrinjoy · 2022-10-28T03:57:19Z

Is anyone still getting hydration error even after using slidesperview ="auto" ?

<Swiper
          spaceBetween={50}
          slidesPerView="auto"
          loopedSlides={3}
          pagination={{
            el: ".my-custom-pagination-div",
            clickable: true,
            renderBullet: (index, className) => {
              return '<span class="' + className + '">' + "</span>";
            },
          }}
          navigation={true}
          loop={true}
          centeredSlides={true}
          breakpoints={{
            992: {
              slidesPerView: 2,
            },
          }}
          onSlideChange={(swiperCore) => {
            const { activeIndex, snapIndex, previousIndex, realIndex } =
              swiperCore;
            setActiveApp(realIndex);
          }}

          // left and right carousels should be half
          // width of the slide
        >
          {data.map((item, index) => {
            return (
              <SwiperSlide key={index}>
                <DataCard
                  visits={visits}
                  item={item}
                  active={activeData === index}
                />
              </SwiperSlide>
            );
          })}

          {isDesktop && (
            <>
              <PrevOverlay />
              <NextOverlay />
            </>
          )}
        </Swiper>

jakeprins · 2022-11-01T19:07:18Z

Is anyone still getting hydration error even after using slidesperview ="auto" ?

<Swiper
          spaceBetween={50}
          slidesPerView="auto"
          loopedSlides={3}
          pagination={{
            el: ".my-custom-pagination-div",
            clickable: true,
            renderBullet: (index, className) => {
              return '<span class="' + className + '">' + "</span>";
            },
          }}
          navigation={true}
          loop={true}
          centeredSlides={true}
          breakpoints={{
            992: {
              slidesPerView: 2,
            },
          }}
          onSlideChange={(swiperCore) => {
            const { activeIndex, snapIndex, previousIndex, realIndex } =
              swiperCore;
            setActiveApp(realIndex);
          }}

          // left and right carousels should be half
          // width of the slide
        >
          {data.map((item, index) => {
            return (
              <SwiperSlide key={index}>
                <DataCard
                  visits={visits}
                  item={item}
                  active={activeData === index}
                />
              </SwiperSlide>
            );
          })}

          {isDesktop && (
            <>
              <PrevOverlay />
              <NextOverlay />
            </>
          )}
        </Swiper>

Yes

kentakunkentakun · 2022-11-12T08:37:27Z

Is anyone still getting hydration error even after using slidesperview ="auto" ?

<Swiper
          spaceBetween={50}
          slidesPerView="auto"
          loopedSlides={3}
          pagination={{
            el: ".my-custom-pagination-div",
            clickable: true,
            renderBullet: (index, className) => {
              return '<span class="' + className + '">' + "</span>";
            },
          }}
          navigation={true}
          loop={true}
          centeredSlides={true}
          breakpoints={{
            992: {
              slidesPerView: 2,
            },
          }}
          onSlideChange={(swiperCore) => {
            const { activeIndex, snapIndex, previousIndex, realIndex } =
              swiperCore;
            setActiveApp(realIndex);
          }}

          // left and right carousels should be half
          // width of the slide
        >
          {data.map((item, index) => {
            return (
              <SwiperSlide key={index}>
                <DataCard
                  visits={visits}
                  item={item}
                  active={activeData === index}
                />
              </SwiperSlide>
            );
          })}

          {isDesktop && (
            <>
              <PrevOverlay />
              <NextOverlay />
            </>
          )}
        </Swiper>

I had a similar situation, but solved it by limiting Swiper calls to client-side. It may be a bit of a messy solution....
↓

const [isClient, setIsClient] = useState(false)
const createSwiper = () => {
  if (isClient) {
    return <SlideShowContainer />
  } else {
    <></>
  }
}
useEffect(() => {
  setIsClient(true)
}, [])

// use createSwiper()
const SwiperContainer = () => {
 return {createSwiper()}
}

// Define Swiper
const SlideShowContainer = () => {
 return (
  <Swiper
   .....>
  </Swiper>
}

Helius01 · 2022-11-13T13:47:23Z

Using slidesPerView="auto" fixed the issue for me.

Sample Code for reference

<Swiper
        spaceBetween={10}
        slidesPerView="auto"
        breakpoints={{
          320: {
            slidesPerView: 1,
            spaceBetween: 30,
          },
          640: {
            slidesPerView: 1,
            spaceBetween: 10,
          },
          768: {
            slidesPerView: 2,
            spaceBetween: 20,
          },
          1024: {
            slidesPerView: 3,
            spaceBetween: 30,
          },
        }}
      >
              <SwiperSlide>Slide one</SwiperSlide>
      </Swiper>

it does not worked for me .
the breakepoints section working with window object and its not accessible on Hydration .
so is there any solution?

Helius01 · 2022-11-13T14:25:04Z

I don't know is it dirty or not? but i fixed it by the code :

  const [customSwiperOptions, setCustomSwiperOptions] = useState<SwiperOptions>();

  useEffect(() => {
    const options: SwiperOptions = {
      breakpoints: {

        320: {
          slidesPerView: 1,
        },
        640: {
          slidesPerView: 2,
        },
        768: {
          slidesPerView: 3,
        },
        1024: {
          slidesPerView: 4,
        },
        1280: {
          slidesPerView: 5,
        },
        1536: {
          slidesPerView: 6
        }
      }
    }
    setCustomSwiperOptions(options);
  }, [])

 {
          customSwiperOptions &&
          <Swiper modules={[Navigation, Pagination, Scrollbar, A11y]}
            spaceBetween={20}
            navigation
            breakpoints={customSwiperOptions.breakpoints}
            pagination={{ clickable: true }}
            scrollbar={{ draggable: true }}>
            {
              myItems.map((x) => {
                return <SwiperSlide key={x.id} className='p-2'> <Item data={x}></Item></SwiperSlide>
              })
            }
          </Swiper>
}

sandrinjoy · 2022-11-13T14:30:10Z

Even if we keep swiper client side, isn't it causing a huge CLS ?

pieeee · 2022-11-22T18:19:16Z

Using slidesPerView="auto" fixed the issue for me.

Sample Code for reference

<Swiper
        spaceBetween={10}
        slidesPerView="auto"
        breakpoints={{
          320: {
            slidesPerView: 1,
            spaceBetween: 30,
          },
          640: {
            slidesPerView: 1,
            spaceBetween: 10,
          },
          768: {
            slidesPerView: 2,
            spaceBetween: 20,
          },
          1024: {
            slidesPerView: 3,
            spaceBetween: 30,
          },
        }}
      >
              <SwiperSlide>Slide one</SwiperSlide>
      </Swiper>

That works, Thanks!!

ajmaurya99 · 2022-12-09T14:09:38Z

Thanks it worked for me. :)

kaidezen · 2022-12-24T19:06:47Z

I don't know is it dirty or not? but i fixed it by the code :

  const [customSwiperOptions, setCustomSwiperOptions] = useState<SwiperOptions>();

  useEffect(() => {
    const options: SwiperOptions = {
      breakpoints: {

        320: {
          slidesPerView: 1,
        },
        640: {
          slidesPerView: 2,
        },
        768: {
          slidesPerView: 3,
        },
        1024: {
          slidesPerView: 4,
        },
        1280: {
          slidesPerView: 5,
        },
        1536: {
          slidesPerView: 6
        }
      }
    }
    setCustomSwiperOptions(options);
  }, [])

 {
          customSwiperOptions &&
          <Swiper modules={[Navigation, Pagination, Scrollbar, A11y]}
            spaceBetween={20}
            navigation
            breakpoints={customSwiperOptions.breakpoints}
            pagination={{ clickable: true }}
            scrollbar={{ draggable: true }}>
            {
              myItems.map((x) => {
                return <SwiperSlide key={x.id} className='p-2'> <Item data={x}></Item></SwiperSlide>
              })
            }
          </Swiper>
}

Thank you for this, I feel this is the best solution on this thread!

I made some small simplifications:

`
const [customSwiperOptions, setCustomSwiperOptions] = useState(null);

useEffect(() => {
const options = {
640: {
slidesPerView: 2,
spaceBetween: 20,
},
768: {
slidesPerView: 2,
spaceBetween: 20,
},
1024: {
slidesPerView: 3,
spaceBetween: 20,
},
1200: {
slidesPerView: 4,
spaceBetween: 20,
},
}
setCustomSwiperOptions(options);
}, [])

const testimonialCarousel = {
slidesPerView: 1,
spaceBetween: 20,
loop: true,
speed: 1000,
centeredSlides: true,
autoHeight: true,
modules: [Autoplay],
autoplay: {
waitForTransition: false,
delay: 4000,
},
breakpoints: customSwiperOptions
};

{customSwiperOptions && <Swiper {...testimonialCarousel}
    >
      {TESTIMONIALS_DATA.map((item, index) => (
        <SwiperSlide key={index}>
          {item.map(({ image, text, name, username }, _index) => (
            <TestimonialsCard
              image={image}
              text={text}
              name={name}
              key={_index}
              username={username}
              sx={styles.testimonialsCard}
            />
          ))}
        </SwiperSlide>
      ))}
    </Swiper>}`

bandesha101 · 2023-06-15T10:32:19Z

this is nice

rukeni mentioned this issue Jun 22, 2022

👀 swiperJS 관심 있는 이슈 frontendcommitDay/tutorial_swipeJS#2

Open

Sakkhor909 closed this as completed Jun 26, 2022

Sakkhor909 reopened this Jul 12, 2022

EverNife mentioned this issue Aug 19, 2022

Usage of breakpoints and loop together leads to hydration mismatch in SSR (Vite/Vue3/Swiper) #5673

Closed

6 tasks

nolimits4web closed this as completed Oct 24, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using breakpoints option in Next JS causes Hydration error #5784

Using breakpoints option in Next JS causes Hydration error #5784

Sakkhor909 commented Jun 8, 2022 •

edited

Loading

AbdushukurRasulov commented Jun 12, 2022

Jared0430 commented Jun 15, 2022

iampawan31 commented Jun 15, 2022

ssandlan commented Jun 16, 2022

iampawan31 commented Jun 16, 2022 •

edited

Loading

laurenskling commented Jun 23, 2022

Sakkhor909 commented Jun 26, 2022

jordanlambrecht commented Jul 7, 2022

Sakkhor909 commented Jul 12, 2022

AbdushukurRasulov commented Jul 12, 2022

alimasha-design commented Jul 25, 2022

laurenskling commented Jul 25, 2022

moinulmoin commented Aug 18, 2022

vicasas commented Oct 10, 2022

MuharremGonel commented Oct 26, 2022

sandrinjoy commented Oct 28, 2022

jakeprins commented Nov 1, 2022

kentakunkentakun commented Nov 12, 2022

Helius01 commented Nov 13, 2022 •

edited

Loading

Helius01 commented Nov 13, 2022

sandrinjoy commented Nov 13, 2022 •

edited

Loading

pieeee commented Nov 22, 2022

ajmaurya99 commented Dec 9, 2022

kaidezen commented Dec 24, 2022 •

edited

Loading

bandesha101 commented Jun 15, 2023

Using breakpoints option in Next JS causes Hydration error #5784

Using breakpoints option in Next JS causes Hydration error #5784

Comments

Sakkhor909 commented Jun 8, 2022 • edited Loading

Discussed in #5776

AbdushukurRasulov commented Jun 12, 2022

Jared0430 commented Jun 15, 2022

iampawan31 commented Jun 15, 2022

ssandlan commented Jun 16, 2022

iampawan31 commented Jun 16, 2022 • edited Loading

laurenskling commented Jun 23, 2022

Sakkhor909 commented Jun 26, 2022

jordanlambrecht commented Jul 7, 2022

Sakkhor909 commented Jul 12, 2022

AbdushukurRasulov commented Jul 12, 2022

alimasha-design commented Jul 25, 2022

laurenskling commented Jul 25, 2022

moinulmoin commented Aug 18, 2022

vicasas commented Oct 10, 2022

MuharremGonel commented Oct 26, 2022

sandrinjoy commented Oct 28, 2022

jakeprins commented Nov 1, 2022

kentakunkentakun commented Nov 12, 2022

Helius01 commented Nov 13, 2022 • edited Loading

Helius01 commented Nov 13, 2022

sandrinjoy commented Nov 13, 2022 • edited Loading

pieeee commented Nov 22, 2022

ajmaurya99 commented Dec 9, 2022

kaidezen commented Dec 24, 2022 • edited Loading

bandesha101 commented Jun 15, 2023

Sakkhor909 commented Jun 8, 2022 •

edited

Loading

iampawan31 commented Jun 16, 2022 •

edited

Loading

Helius01 commented Nov 13, 2022 •

edited

Loading

sandrinjoy commented Nov 13, 2022 •

edited

Loading

kaidezen commented Dec 24, 2022 •

edited

Loading