Next.js CDN引入Swiper报Swiper is not defined错误排查

• 配置文件在服务端渲染阶段就被顶层import执行，此时CDN加载的Swiper还未注入客户端window对象，根本不存在Swiper构造函数，直接触发ReferenceError
• 代码存在语法问题：未从next/script引入Script组件，且多写了一个多余的</Script>闭合标签，Swiper JS资源未按预期加载
• 初始化时机错误：模块加载阶段就执行new Swiper()，此时轮播DOM节点还未渲染，就算Swiper存在也会找不到挂载节点
• React/Next语法不规范：直接在JSX里用class属性，会触发控制台警告，需要替换为className

1. 调整Swiper配置文件逻辑，不要在模块顶层直接执行初始化，改为导出可调用的初始化函数，增加客户端环境和Swiper存在性校验
2. 修正页面组件语法：引入Next.js内置Script组件，替换所有class为className，删除多余的标签闭合
3. 调整初始化时机：等Swiper CDN资源加载完成、DOM渲染结束后再调用初始化函数，组件卸载时手动销毁Swiper实例避免内存泄漏

修正后的配置文件（Configuration/swiper.js） #

export const initSwiper = () => {
  // 非客户端环境、Swiper未加载时直接返回
  if (typeof window === 'undefined' || !window.Swiper) return null
  const swiperInstance = new window.Swiper('.swiper', {
    direction: 'vertical',
    loop: true,
    pagination: {
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  });
  console.log(swiperInstance)
  return swiperInstance
}

修正后的页面组件代码 #

import React, { useEffect, useRef } from 'react'
import Image from 'next/image'
import Head from 'next/head'
import Script from 'next/script'
import { initSwiper } from '../Configuration/swiper'

const aboutus = () => {
  const swiperInsRef = useRef(null)

  const handleSwiperLoad = () => {
    swiperInsRef.current = initSwiper()
  }

  // 组件卸载时销毁实例
  useEffect(() => {
    return () => {
      if (swiperInsRef.current) {
        swiperInsRef.current.destroy()
        swiperInsRef.current = null
      }
    }
  }, [])

  return (
    <>
      <Head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.2.6/swiper-bundle.css" />
      </Head>
      <div>
        <div style={{width:"300px",height:"400px"}} className="swiper w-80 h-96">
          <div className="swiper-wrapper">
            <div className="swiper-slide">Slide 1</div>
            <div className="swiper-slide">Slide 2</div>
            <div className="swiper-slide">Slide 3</div>
          </div>
          <div className="swiper-pagination"></div>
          <div className="swiper-button-prev"></div>
          <div className="swiper-button-next"></div>
          <div className="swiper-scrollbar"></div>
        </div>
      </div>
      <Script 
        src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.2.6/swiper-bundle.min.js"  
        strategy="afterInteractive"
        onLoad={handleSwiperLoad}
      />
    </>
  )
}

export default aboutus

更推荐的做法是直接通过npm安装Swiper依赖使用，不需要依赖CDN加载，不会出现全局变量不存在的问题，SSR兼容性更好。安装命令为npm i swiper，安装后直接在useEffect中引入Swiper并初始化即可，无需等待CDN加载回调。

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