Keen-slider doesn't work well with Server-side render on the first render - NextJS

Question

I am using nextJS with typescript and got 1 error when using the keen-slider library v5.4.0. The error occurs when the keen-slider is rendered for the first time, the items are not of the same type transform when I drag the slider. It causes items to be stacked on top of each other. Has anyone come across such a case? Please let me know anything that can fix it. Thank you all.

Answer 1

I fixed the above by upgrading to keen-slider version 6.6.14.

npm i keen-slider@v6.6.14

And add this code below

const [internalSliderRef, internalSlider] = useKeenSlider(sliderOptions);

  React.useEffect(() => {
    internalSlider.current?.update({
      ...sliderOptions
    });
  }, [internalSlider, sliderOptions]);

Thank for all