Problem with react slick: Element type is invalid

Question

I have my component in React and I am trying to make a slider with react slick, precisely with the example code of your page but when I rederizar this component gives me the error:Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

 import React from "react";
  import Slider from "react-slick";

  export default function ProductosMasVendidos() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 3, 
      slidesToScroll: 1,
    };

    return (
      <div className="slider-container">
      <Slider {...settings}>
        <div>
          <h3>1</h3>
        </div>
        <div>
          <h3>2</h3>
        </div>
        <div>
          <h3>3</h3>
        </div>
        <div>
          <h3>4</h3>
        </div>
        <div>
          <h3>5</h3>
        </div>
        <div>
          <h3>6</h3>
        </div>
      </Slider>
    </div>
  
 
  
    );
  }

The idea is to show the same example slider that exists in the react slick page, when I remove the Slider component, the ProductsMostSold component will redraw correctly with everything inside.

Answer 1

This seems to be a popular problem with the react-slick library, and I'm not sure exactly what causes the error, but itt can be fixed by adjusting your code as below:

 import React from "react";
 import Slider from "react-slick";

 export default function ProductosMasVendidos() {
  const settings = {
   dots: true,
   infinite: true,
   speed: 500,
   slidesToShow: 3, 
   slidesToScroll: 1,
  };

 const SliderComponent = typeof window === 'undefined' ? Slider.default : Slider;

return (
  <div className="slider-container">
   <SliderComponent {...settings}>
    ...
   </SliderComponent>
  </div>
 );
}