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

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={<CustomLeftArrow />} customRightArrow={<CustomRightArrow />} responsive={responsive} itemClass=“px-4” > {dataLoaded && featuredPosts.map((post, index) => ( <FeaturedPostCard key={index} post={post} /> ))} </Carousel> };`

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.

About this issue

Original URL
State: open
Created a year ago
Reactions: 10
Comments: 17 (1 by maintainers)

Most upvoted comments

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

+10

thisdotLolu on May 25, 2023

@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.

JojokCreator on Feb 10, 2023

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

hajjarjoseph on Aug 31, 2023

This fixed it for me on Remix

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

afk-mario on Oct 17, 2023

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)

benderillo on Feb 27, 2023