search

YIZHUANG / react-multi-carousel

A lightweight production-ready Carousel that rocks supports multiple items and server-side rendering with no dependency. Bundle size 2kb.
MIT License
1.3k stars 293 forks source link

SSR not working in NextJS 13 and later versions. #425

Open rawatmanoj opened 10 months ago

rawatmanoj commented 10 months ago

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 commented 10 months ago

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 commented 10 months ago

+1 getting the same issue. On Version 13.5

crosskpixel commented 9 months ago

Change your file .tsx to .jsx Works for me

metrorailings commented 8 months ago

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

LiamWinterton commented 8 months ago

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 commented 5 months ago

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 commented 2 months ago

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 commented 2 months ago

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.