SSR not working in NextJS 13 and later versions.

[rawatmanoj]

Library is not working without giving "use client" at the top. Even for SSR we have to give "use client" which makes it render client side.

[reekrd]

Same in NextJS 14. If the Carousel is imported in a component that does not define "use client" the following error is generated at compile time. Should be noted that this is for a project that uses the App Router

⨯ node_modules/react-multi-carousel/lib/types.js (1:262) @ d
⨯ TypeError: Object prototype may only be an Object or null: undefined
at setPrototypeOf ()
at extendStatics (webpack-internal:///(rsc)/./node_modules/react-multi-carousel/lib/types.js:10:11)
at eval (webpack-internal:///(rsc)/./node_modules/react-multi-carousel/lib/types.js:16:9)
at eval (webpack-internal:///(rsc)/./node_modules/react-multi-carousel/lib/types.js:31:12)
at eval (webpack-internal:///(rsc)/./node_modules/react-multi-carousel/lib/types.js:32:2)
at (rsc)/./node_modules/react-multi-carousel/lib/types.js

[RuiQiHuang1832]

+1 getting the same issue. On Version 13.5

[crosskpixel]

Change your file .tsx to .jsx Works for me

[metrorailings]

Same exact issue here. SSR is impossible on NextJS until this is fixed.

[LiamWinterton]

Having the exact same issue.

Abandoning this library in favour of something that doesn't have 5 year old examples in a fast paced world.

[ChetSocio]

What about using it as component and importing it on page.tsx file ? It works fine on my side but i have z-index issue and scroll is not smooth and not quiet responsive.

[ChetSocio]

Next.js provides many ways to make it supportive to SSR or ISR. You can use my tactics and I jave solved z-index issue by using my custom.css file instead of importing package/css i changed zindex and imported it from mypackage/assets/carousel.css file.

I was skeptic about this package from start. Now you can use dhadcn carousel. It makes work more easy and scroll experience is quiet smooth too.

[everzel]

I think you should use 'use client' and add the deviceType prop (e.g., deviceType="lg") along with ssr - it helped me with server-side rendering of the block content.