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

It seems that the react component in which the Carousel component is being used should be a client component and not a server component. This is done using the directive "use client". In React 18, components inside in the app directory are by default server components.

It is not clear why it is not working from a server component. Probably best create an issue on their github project https://github.com/leandrowd/react-responsive-carousel/issues

Answer 2

I just got Next.js and react-responsive-carousel to work together by inserting "use client" on the top of your carousel component.

This is what yours should look like to get to work:

'use client';
import React from 'react';
import Image from 'next/image';
import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';

export default function MyCarousel() {
  return (
    <Carousel
      autoPlay
      infiniteLoop
      showStatus={false}
      showIndicators={false}
      showThumbs={false}
      interval={5000}
    >
      <div>
        <img src='/image1.jpg' />
      </div>
      <div>
        <img src='/image2.jpg' />
      </div>
    </Carousel>
  );
}

Answer 3

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

Answer 4

Starting from Next.js 13, all the pages inside app directory by default will be Server Component.

Server Component does not allow the interactive and event listener (onClick, onChange and so on) & use state and lifecycle effect (useState, useEffect and so on).

The reason why react-responsive-carousel cannot be used might be the library using useState or useEffect internally or onClick and onChange event listener.

Next.js official documentation have indicated when to use Server Component and Client Component

Answer 5

this same issue faces me so in Next Js 13 the of components write "use Client" word into String solve this problem

"use client"

"use client"
    import Image from 'next/image'
    import ReactPlayer from 'react-player'
    import { Carousel } from 'react-responsive-carousel';
    import 'react-responsive-carousel/lib/styles/carousel.min.css';
    
    export default function Home() {
      return (
        <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <Carousel
          autoPlay
          infiniteLoop
          showStatus={false}
       
          interval={5000}
        >
          <div>
            <Image src='/image1.jpg' width={20} height={30} />
          </div>
          <div>
            <Image src='/image2.jpg' width={20} height={30}/>
          </div>
        </Carousel>    </main>
      )
    }

Answer 6

For react-responsive-carousel use "use client"

"use client"
import React from 'react'
import { Carousel } from 'react-responsive-carousel';
import sliderImg_1 from '../images/slider/sliderImg_1.jpg';
import sliderImg_2 from '../images/slider/sliderImg_2.jpg';
import sliderImg_3 from '../images/slider/sliderImg_3.jpg';
import sliderImg_4 from '../images/slider/sliderImg_4.jpg'
import Image from 'next/image';

const Banner = () => {
  return (
    <Carousel>
                <div>
                    <Image src={sliderImg_1} alt="slider-1" />
                    <p className="legend">Legend 1</p>
                </div>
                <div>
                    <Image src={sliderImg_2} alt="slider-2" />
                    <p className="legend">Legend 2</p>
                </div>
                <div>
                    <Image src={sliderImg_3} alt="slider-3"/>
                    <p className="legend">Legend 3</p>
                </div>
                <div>
                    <Image src={sliderImg_4} alt="slider-4"/>
                    <p className="legend">Legend 3</p>
                </div>
            </Carousel>
  )
}

export default Banner

Answer 7

With 'use client' whole your file become CSR If you don't want that, Use this solution:

1.Create file named by : Carousel.tsx

2.Write this code below:

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

export default Carousel;

3.Then in your file:

 import Carousel from ./Carousel;

Now it's work on server-side and only Carousel is in CSR