Next.js 13使用react-responsive-carousel组件出现Super表达式错误求助

错误原因 #

你遇到的TypeError: Super expression must either be null or a function, not undefined，核心原因是Next.js 13的App Router默认组件为Server Components，而react-responsive-carousel的Carousel是类组件，无法在Server Components环境中渲染，必须在Client Components中使用。

解决方案 #

1. 标记组件为Client Component #

在使用Carousel的组件文件最顶部添加'use client'指令，将组件转为Client Component：

'use client';

import { Carousel } from "react-responsive-carousel";
// 必须导入组件样式文件，否则轮播样式会异常
import "react-responsive-carousel/lib/styles/carousel.min.css";

export default function BannerCarousel() {
  return (
    <Carousel
      autoPlay
      infiniteLoop
      showStatus={false}
      showIndicators={false}
      showThumbs={false}
      interval={5000}
    >
      {/* 添加轮播项示例 */}
      <div>
        <img src="/banner-1.jpg" alt="首页横幅1" />
      </div>
      <div>
        <img src="/banner-2.jpg" alt="首页横幅2" />
      </div>
    </Carousel>
  );
}

2. 确认依赖完整性 #

• 确保已正确安装依赖：

  npm install react-responsive-carousel
  # 或使用yarn
  yarn add react-responsive-carousel
  

• 必须导入样式文件，否则轮播的基础布局、交互样式会缺失。

3. 路由环境适配 #

如果你的项目使用的是Page Router（pages/目录），无需添加'use client'指令；但在App Router（app/目录）下，所有依赖DOM操作或类组件的第三方库都需要标记为Client Component才能正常运行。

内容的提问来源于stack exchange，提问作者Md Parvez Musharaf