超级表达式必须为 null 或函数 nextjs 13

Question

当我导入时

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

并像下面这样使用它：

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

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

我期望在我的网站上出现横幅轮播

Answer 1

添加use client对我有用。这是代码片段。我正在使用 Next.js 13 和 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 2

看来使用Carousel组件的react组件应该是客户端组件而不是服务器组件。这是使用指令“use client”完成的。在 React 18 中，app 目录中的组件默认是服务器组件。

目前尚不清楚为什么它不能从服务器组件运行。可能最好在他们的 github 项目上创建一个问题 https://github.com/leandrowd/react-responsive-carousel/issues