使用Swiper遇TypeError: createContext不是函数问题，求解决方法

错误信息 #

⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at eval (webpack-internal:///(rsc)/./node_modules/swiper/swiper-react.mjs:122:94)
    at (rsc)/./node_modules/swiper/swiper-react.mjs (/media/mazhar/working_material/client-work/new_egala/egalaspot_n-storefront/.next/server/vendor-chunks/swiper.js:410:1)
    at __webpack_require__ (/media/mazhar/working_material/client-work/new_egala/egalaspot_n-storefront/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./src/modules/home/components/hero/index.tsx:7:70)
    at (rsc)/./src/modules/home/components/hero/index.tsx (/media/mazhar/working_material/client-work/new_egala/egalaspot_n-storefront/.next/server/app/[countryCode]/(main)/page.js:808:1)
    at __webpack_require__ (/media/mazhar/working_material/client-work/new_egala/egalaspot_n-storefront/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./src/app/[countryCode]/(main)/page.tsx:9:87)
    at (rsc)/./src/app/[countryCode]/(main)/page.tsx (/media/mazhar/working_material/client-work/new_egala/egalaspot_n-storefront/.next/server/app/[countryCode]/(main)/page.js:592:1)
    at Function.__webpack_require__ (/media/mazhar/working_material/client-work/new_egala/egalaspot_n-storefront/.next/server/webpack-runtime.js:33:42)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'TypeError',
  page: '/us'
}

代码实现 #

// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react"
import Image from "next/image"
import "../../../../styles/SlideShow.module.css"
import { Autoplay, Pagination, Navigation } from "swiper/modules"

// Import Swiper styles
import "swiper/css"
import "swiper/swiper-bundle.css" // Ensure correct path to CSS file
import "swiper/css/pagination"
import "swiper/css/navigation"

interface Slider {
  id: number
  image: string
}

const sliders: Slider[] = [
  { id: 1, image: "@public/bg-img/slider2_20240715032150714.jpg" },
  { id: 2, image: "@public/bg-img/slider3_20240715032150854.jpg" },
  { id: 3, image: "@public/bg-img/slider4_20240715032150854.jpg" },
]

export default function Hero() {
  return (
    <Swiper
      slidesPerView={1}
      spaceBetween={0}
      loop={true}
      autoplay={{
        delay: 2500,
        disableOnInteraction: false,
      }}
      pagination={{
        clickable: true,
        type: "fraction",
        dynamicBullets: true,
      }}
      navigation={true}
      modules={[Autoplay, Pagination, Navigation]}
      className="mySwiper cursor-pointer"
    >
      {sliders.map((slider) => {
        return (
          <SwiperSlide key={slider.id}>
            <Image
              src={slider.image}
              layout="responsive"
              width={1144}
              height={400}
              alt="Slide image"
            />
          </SwiperSlide>
        )
      })}
    </Swiper>
  )
}

已尝试操作 #

删除node_modules并执行yarn install，问题未解决。

核心错误原因 #

该错误是因为Swiper React组件依赖React客户端API（如createContext），但你的Hero组件在Next.js 13+ App Router的Server Components（RSC）环境中被渲染。App Router默认所有组件为服务端组件，无法运行客户端API，因此抛出此错误。

解决步骤 #

1. 标记组件为客户端组件
   在Hero组件文件的最顶部添加'use client'指令，强制组件在客户端渲染：

'use client' // 必须放在文件第一行

// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react"
// ... 其余代码

2. 修正代码中的错误

• 图片路径错误：Next.js中public目录下的文件直接通过根路径访问，不需要@public前缀，修改sliders数组：

  const sliders: Slider[] = [
    { id: 1, image: "/bg-img/slider2_20240715032150714.jpg" },
    { id: 2, image: "/bg-img/slider3_20240715032150854.jpg" },
    { id: 3, image: "/bg-img/slider4_20240715032150854.jpg" },
  ]
  

• 废弃的Image组件属性：Next.js 13+中layout="responsive"已被废弃，改用fill结合容器样式实现响应式：

  <SwiperSlide key={slider.id}>
    <div className="relative w-full h-[400px]">
      <Image
        src={slider.image}
        fill
        alt="Slide image"
        objectFit="cover"
      />
    </div>
  </SwiperSlide>
  

• 重复的CSS导入：swiper/swiper-bundle.css已包含所有基础样式，删除重复的import "swiper/css"：

  // 保留bundle样式即可，移除基础样式导入
  import "swiper/swiper-bundle.css"
  import "swiper/css/pagination"
  import "swiper/css/navigation"
  

3. 重启开发服务器
   修改完成后重启Next.js开发服务器，确保所有变更生效。

内容的提问来源于stack exchange，提问作者Muhammad Mazhar Iqbal