在NEXT.js中使用Owl carousel出现window未定义错误如何解决

Owl Carousel 是强依赖浏览器全局对象 window/document 的客户端插件，如果你使用的是 Next.js 这类支持服务端渲染/静态生成的框架，服务端渲染阶段不存在浏览器环境，直接导入、运行插件代码就会抛出 ReferenceError: window is not defined 错误，和配置步骤的正确性无关。

• 先确认项目是否启用了服务端渲染/静态站点生成能力，比如 Next.js 的 SSR/SSG/ISR 模式，这是触发该错误的最常见场景
• 检查 Owl Carousel 的导入位置：如果在组件顶层直接使用 import 'owl.carousel' 或者 `import OwlCarousel from 'react-owl-carousel' 这类同步导入语句，会导致打包时直接将插件代码包含进服务端 bundle 中，执行时直接报错
• 检查 next.config.js 配置：是否设置了正确的依赖导入规则，Owl Carousel 相关依赖没有被排除在服务端打包范围之外

• 方案1：组件动态导入（关闭服务端渲染，Next 环境优先推荐） #

首先将使用 Owl Carousel 的逻辑单独封装为组件，再通过 next/dynamic 动态导入组件并关闭服务端渲染：

// components/MyCarousel.js 单独封装轮播组件
import OwlCarousel from 'react-owl-carousel'
import 'owl.carousel/dist/assets/owl.carousel.css'
import 'owl.carousel/dist/assets/owl.theme.default.css'

export default function MyCarousel() {
  return (
    <OwlCarousel items={3} margin={10} nav>
      {/* 轮播项内容 */}
    </OwlCarousel>
  )
}

// 在页面/父组件中动态导入，关闭服务端渲染
import dynamic from 'next/dynamic'
const MyCarousel = dynamic(() => import('@/components/MyCarousel'), {
  ssr: false,
  loading: () => <div>轮播加载中</div>
})

• 方案2：客户端挂载阶段再导入初始化 #

在组件挂载的生命周期回调中执行导入逻辑，确保仅在浏览器环境加载插件：

import { useEffect, useRef } from 'react'

export default function CarouselPage() {
  const carouselRef = useRef(null)
  useEffect(() => {
    const initCarousel = async () => {
      const $ = (await import('jquery')).default
      window.$ = $
      await import('owl.carousel')
      // 初始化轮播
      $(carouselRef.current).owlCarousel({
        items: 3,
        margin: 10,
        nav: true
      })
    }
    initCarousel()
  }, [])

  return <div ref={carouselRef} className="owl-carousel">
    {/* 轮播项内容 */}
  </div>
}

• 方案3：修改 next.config.js 配置 #

如果前两个方案仍有问题，可在配置中添加依赖转译规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['react-owl-carousel', 'owl.carousel'],
}

module.exports = nextConfig

该方案建议配合前两种方案共同使用，避免服务端加载客户端组件引入轮播相关逻辑即可解决报错。

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