Super expression must either be null or a function nextjs 13

Question

when I import

import { Carousel } from "react-responsive-carousel";

and use it like bellow:

 <Carousel
        autoPlay
        infiniteLoop
        showStatus={false}
        showIndicators={false}
        showThumbs={false}
        interval={5000}
      ></Carousel>

 TypeError: Super expression must either be null or a function, not undefined

I was expect carousel for banner in my website

Answer 1

Adding use client worked for me. Here is code snippet. I am using Next.js 13 and Typescript

'use client'
import React from 'react'
import { Carousel } from 'react-responsive-carousel'

type Props = {}

function Banner({}: Props) {
  return (
    <div className='relative'>
        <Carousel
            autoPlay
            infiniteLoop
            showStatus={false}
            showThumbs={false}
            interval={5000}
        >
            <div>
                <img loading='lazy' src="" alt='' />
            </div>
            <div>
                <img loading='lazy' src="" alt='' />
            </div>
            <div>
                <img loading='lazy' src="" alt='' />
            </div>

        </Carousel>
    </div>
  )

}
export default Banner