CODEWITHSUNDEEP
reactjsnext.jstypeerrorpure-react-carousel
Md Parvez Musharaf
Md Parvez Musharaf

Reputation: 221

Super expression must either be null or a function nextjs 13

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

Upvotes: 22

Views: 26407

Answers (8)

Shakil- The Coding monster
Shakil- The Coding monster

Reputation: 1077

For nextjs-15 add "use client". Hope it will solve the problem!

Upvotes: 0

Aliirezaesm921
Aliirezaesm921

Reputation: 181

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

Upvotes: 4

Shakil- The Coding monster
Shakil- The Coding monster

Reputation: 1077

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

Upvotes: 0

usama ijaz
usama ijaz

Reputation: 1

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>
      )
    }

Upvotes: -1

Fu Nian Wong
Fu Nian Wong

Reputation: 1182

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

Upvotes: 3

RC_02
RC_02

Reputation: 3674

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

Upvotes: 51

Rodrigo Sakae
Rodrigo Sakae

Reputation: 31

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>
  );
}

Upvotes: 3

Jimmy Nsenga
Jimmy Nsenga

Reputation: 156

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

Upvotes: 10

Related Questions