react-multi-carousel ssr does not work nextjs

Question

i am trying to set up react-multi-carousel with ssr for my hero banner but it's always rendering the same error. I tried setting deviceType to just desktop for testing but nothing seemed to work. My code:

import React from "react";
import Link from "next/link";
import Image from "next/image";
import Carousel from "react-multi-carousel";
import MobileDetect from "mobile-detect";

import XboxBanner from "../public/digitalcitybanner1.png";
import "react-multi-carousel/lib/styles.css";

const HeroBanner = () => {
  let deviceType = "";

  const md = new MobileDetect(userAgent);
  if (md.tablet()) {
    deviceType = "tablet";
  } else if (md.mobile()) {
    deviceType = "mobile";
  } else {
    deviceType = "desktop";
  }

  console.log(deviceType);

  return (
    <Carousel
      // className="hero-banner-container"
      deviceType={deviceType}
      ssr
      showDots={true}
      responsive={{ same: { items: 1, breakpoint: { max: 4000, min: 0 } } }}
      // style={{ backgroundImage: `url(${urlLink})` }}
    >
      <Link href={"/xboxgames"}>
        <Image
          src={XboxBanner}
          alt="digital city xbox games"
          style={{ width: "100%", height: "100%" }}
        />
      </Link>
    </Carousel>
  );
};

export default HeroBanner;

the error i am getting is:

- error node_modules\react-multi-carousel\lib\types.js (1:262) @ d
- error Error [TypeError]: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at extendStatics (webpack-internal:///(sc_server)/./node_modules/react-multi-carousel/lib/types.js:10:11)  
    at eval (webpack-internal:///(sc_server)/./node_modules/react-multi-carousel/lib/types.js:16:9)
    at eval (webpack-internal:///(sc_server)/./node_modules/react-multi-carousel/lib/types.js:31:12)
    at eval (webpack-internal:///(sc_server)/./node_modules/react-multi-carousel/lib/types.js:32:2)
    at (sc_server)/./node_modules/react-multi-carousel/lib/types.js (C:\Users\Kira\Code\ecommerce_sanity\gamestore\.next\server\app\page.js:5541:1)
    at __webpack_require__ (C:\Users\Kira\Code\ecommerce_sanity\gamestore\.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_server)/./node_modules/react-multi-carousel/lib/Carousel.js:22:251)       
    at (sc_server)/./node_modules/react-multi-carousel/lib/Carousel.js (C:\Users\Kira\Code\ecommerce_sanity\gamestore\.next\server\app\page.js:5497:1)
    at __webpack_require__ (C:\Users\Kira\Code\ecommerce_sanity\gamestore\.next\server\webpack-runtime.js:33:43) {
  digest: undefined
}
null

please help i am getting fed up at this point

Answer 1

You should use the "use client" declaration on top of the file, where you import the Carousel component.

"use client";

import Carousel from "react-multi-carousel";