error - TypeError: Object prototype may only be an Object or null: undefined in Next.Js 13

[JojokCreator]

Describe the bug

Trying to use the carousel in a server side component in Next Js 13.1.2 gives the below error and won't render the component.

error - node_modules\react-multi-carousel\lib\types.js (1:262) @ d
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:

To Reproduce: "react-multi-carousel": "^2.8.2", ` const FeaturedPosts = () => { const featuredPosts = await getFeaturedPosts()

<Carousel ssr infinite customLeftArrow={} customRightArrow={} responsive={responsive} itemClass="px-4"

{dataLoaded && featuredPosts.map((post, index) => (

))} };`

Expected behavior Should render the page and the carousel.

Additional context If i use the "use client" directive to render the page using a useEffect for the posts the page renders fine.

[timruiterkamp]

@JojokCreator did you find a fix for this? I am running into the same issue currently.

[JojokCreator]

@JojokCreator did you find a fix for this? I am running into the same issue currently.

Not yet Tim I had to "use client" to get it to work.

[benderillo]

Same here. Won't render, breaks build with NextJs 13.2

info  - Collecting page data ..TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at extendStatics (~/.next/server/chunks/898.js:552:11)
    at __extends (~/.next/server/chunks/898.js:558:9)
    at ~/.next/server/chunks/898.js:573:12
    at Object.80810 (~/.next/server/chunks/898.js:574:2)
    at __webpack_require__ (~/.next/server/webpack-runtime.js:25:43)
    at Object.68616 (~/.next/server/chunks/898.js:118:89)
    at __webpack_require__ (~/.next/server/webpack-runtime.js:25:43)
    at Object.19881 (~/.next/server/chunks/898.js:533:18)
    at __webpack_require__ (~/.next/server/webpack-runtime.js:25:43)

[brgndyy]

I have a same problem. error - node_modules/react-multi-carousel/lib/types.js (1:262) @ d 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)

[YIZHUANG]

Class Component isn't supported by Server Component. I am also using nextjs 13, here is an example: https://www.junia.ai/art. I have a plan to move this to functional component, however can you outline your use case for using server component with the carousel?

[JojokCreator]

Hi Yi, my use case is here https://github.com/JojokCreator/Recipe-Blog-Site inside section/FeaturedPosts.tsx

[hacker1db]

I am facing the same issue with nextJS 13. Thanks!

[timruiterkamp]

What I ended up doing was fetching all the data on the server and then passing it to the carousel that is now a client component (In Nextjs 13). That way you will not get the errors.

[consal]

Same issue with next.JS 13 :(

[jnawaz]

@JojokCreator did you find a fix for this? I am running into the same issue currently.

Not yet Tim I had to "use client" to get it to work.

This worked for me too!

[thisdotLolu]

added 'use client' to the top of the component file and it seems to work

[hajjarjoseph]

What if you want your component to be server-side rendered for SEO purposes for example ? 'use client' won't solve it for that use case

[afk-mario]

This fixed it for me on Remix

https://github.com/YIZHUANG/react-multi-carousel/issues/314#issuecomment-1031216620

[palkim]

no ssr support then, right?

[ailiasova]

Class Component isn't supported by Server Component. I am also using nextjs 13, here is an example: https://www.junia.ai/art. I have a plan to move this to functional component, however can you outline your use case for using server component with the carousel?

i use it in functional component, and it still have the same error. Nextjs 14.1 here is a code example

export function Slider({ items }: ModulesSliderComponentStrapi) { const images = items?.data ?? [] const responsive = { desktop: { breakpoint: { max: 3000, min: 1024 }, items: 3, slidesToSlide: 3 // optional, default to 1. }, tablet: { breakpoint: { max: 1024, min: 464 }, items: 2, slidesToSlide: 2 // optional, default to 1. }, mobile: { breakpoint: { max: 464, min: 0 }, items: 1, slidesToSlide: 1 // optional, default to 1. } } return ( <Carousel swipeable={false} draggable={false} showDots={true} responsive={responsive} ssr={true} // means to render carousel on server-side. infinite={true} autoPlay={false} autoPlaySpeed={1000} keyBoardControl={true} customTransition="all .5" transitionDuration={500} containerClass="carousel-container" removeArrowOnDeviceType={['tablet', 'mobile']} deviceType={'desktop'} dotListClass="custom-dot-list-style" itemClass="carousel-item-padding-40-px"

{images.map((image) => ( <Image key={image.id} src={${process.env.NEXT_PUBLIC_STRAPI_IMAGE_URL}${image.attributes?.url}} alt={image.attributes?.alternativeText ?? ''} width={500} height={500} objectFit={'cover'} /> ))}

[frknecn3]

You can create a sub-component and make it use client, however, I suppose that it does not really support SSR for SEO purposes.

[tyren-r]

Strange that the library claims to support server side rendering but doesn't work with the latest version of the most popular React framework for utilizing ssr :/