React-Slick does not work on SSR projects

[ShreyKumar]

I am trying to install react-slick on a NextJS project with this example but none of the images are showing up.

As seen here, the blue rectangle on the left is the slick Slider component which does not display any image at all.

[abhishekashyap]

You also need to import slick-carousel css

Install it using:

npm install slick-carousel

and import it in _app.js using :

import "slick-carousel/slick/slick.css";

[mikemajara]

@katsos, can you explain what did not worked?

@abhishekashyap it's probably worth mentioning that the style only needs to be imported wherever the Slider is used, as opposed to importing in _app.js

[katsos]

You have to use https://www.npmjs.com/package/@ant-design/react-slick to work with SSR without problems.

I was having problems with ssr-client prop matching while running the app on smaller devices

react-dom.development.js?61bb:88 Warning: Prop `src` did not match. Server: "/assets/img/categories/packaged.png" Client: "/assets/img/categories/baby.png"

Sample of source code

const CATEGORIES_MAP = {
  '01': {
    imgName: 'vegetables',
  },
  '02': {
    imgName: 'meat',
  },
  '03': {
    imgName: 'milk',
  },
  '05': {
    imgName: 'sausage',
  },
  '04': {
    imgName: 'cheese',
  },
  '06': {
    imgName: 'frozen',
  },
  '07': {
    imgName: 'packaged',
  },
};

const SLIDER_SETTINGS = {
  adaptiveHeight: true,
  className: styles.slider,
  infinite: true,
  slidesToShow: 8,
  slidesToScroll: 8,
  speed: 500,
  prevArrow: <PrevArrow category callback={() => arrowClick('categoryLeftClick')} />,
  nextArrow: <NextArrow category callback={() => arrowClick('categoryRightClick')} />,
  responsive: [
    {
      breakpoint: 1200,
      settings: {
        slidesToShow: 7,
        slidesToScroll: 7,
      },
    },
    {
      breakpoint: 1120,
      settings: {
        slidesToShow: 6,
        slidesToScroll: 6,
      },
    },
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 5,
        slidesToScroll: 5,
      },
    },
    {
      breakpoint: 824,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
      },
    },
    {
      breakpoint: 578,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
      },
    },
  ],
};

export default function Categories({categories}) {
  return (
    <section className={styles.container}>
      <Slider {...SLIDER_SETTINGS}>
        {categories.map(({_id, divisionCode, name, numberOfProductsToDisplay, slug}) => (
          <div key={`${_id}${numberOfProductsToDisplay}`}>
            <Link href="/products/[...slug]" as={`/products/${slug}`}>
              <a className={styles.tile}>
                <div className={styles.imgContainer}>
                  {CATEGORIES_MAP[divisionCode] && (
                    <img
                      className={styles.img}
                      src={`/assets/img/categories/${CATEGORIES_MAP[divisionCode].imgName}.png`}
                      alt={name}
                    />
                  )}
                </div>
              </a>
            </Link>
          </div>
        ))}
      </Slider>
    </section>
  );
}

[nonoumasy]

You have to use https://www.npmjs.com/package/@ant-design/react-slick to work with SSR without problems.

I took a look at both packages on npm and they are identical.

[katsos]

@nonoumasy Nope. They are not identical my friend. I have solved all of my problems since I migrated to @ant-design/react-slick.

[zanedev]

+1 on @katsos recommendation, switched to @ant-design/react-slick and all my ssr issues went away magically in my gatsby app