TypeScript+Next.js中使用Swiper遇两类错误，求解决方案

错误根源 #

你犯了两个核心错误：

1. 导入错误：从swiper导入的是Swiper原生JS核心类，而非React组件版本。React组件版的Swiper需要从swiper/react导入。
2. 初始化方式错误：在React/Next.js环境中，不能直接在组件外部通过new Swiper()创建实例，需通过Swiper组件的props传递配置参数。

修正后的代码 #

import { Box } from '@chakra-ui/react';
import React from 'react';
// 从swiper/react导入React组件版的Swiper和SwiperSlide
import { Swiper, SwiperSlide } from 'swiper/react';
// 导入需要的Swiper功能模块
import { FreeMode, Pagination } from 'swiper';
import SwiperCard from './SwiperCard';
// 导入对应样式文件
import 'swiper/css';
import 'swiper/css/free-mode';
import 'swiper/css/pagination';

export default function FrontSwipe() {
  return (
    <Box>
      {/* 将原配置作为props直接传递给Swiper组件 */}
      <Swiper
        modules={[FreeMode, Pagination]}
        direction='horizontal'
        loop={true}
        pagination={{ clickable: true }}
        slidesPerView={3}
        spaceBetween={30}
        freeMode={true}
      >
        <SwiperSlide>
          <SwiperCard>1</SwiperCard>
        </SwiperSlide>
        {/* 可按需添加更多轮播项 */}
        <SwiperSlide>
          <SwiperCard>2</SwiperCard>
        </SwiperSlide>
        <SwiperSlide>
          <SwiperCard>3</SwiperCard>
        </SwiperSlide>
      </Swiper>
    </Box>
  );
}

错误原因说明 #

• TypeError: Class constructor Swiper cannot be invoked without 'new'：你把原生JS的Swiper类当成React组件渲染，JSX要求渲染的是React组件，而原生Swiper类只能通过new创建实例，两者无法混用。
• 'Swiper' cannot be used as a JSX component：原生Swiper类不是React组件，缺少React组件必备的render、setState等属性，因此TypeScript会抛出类型错误。

Next.js额外适配（可选） #

如果你的项目使用Next.js App Router（SSR/SSG场景），可能因Swiper依赖客户端API导致渲染报错，可通过动态导入禁用SSR：

import dynamic from 'next/dynamic';

const Swiper = dynamic(() => import('swiper/react').then(mod => mod.Swiper), {
  ssr: false,
});
const SwiperSlide = dynamic(() => import('swiper/react').then(mod => mod.SwiperSlide), {
  ssr: false,
});

内容的提问来源于stack exchange，提问作者Patrikur