React Vite SSR构建报错：react-slick引发window is not defined异常

该错误的核心原因是：SSR环境中不存在window全局对象，但react-slick依赖的enquire.js在模块加载阶段直接访问了window，导致构建失败。以下是几种实用的解决方法：

方法1：动态导入react-slick，仅在客户端加载 #

延迟到浏览器环境下再加载react-slick，避免SSR阶段触发错误：

import { useEffect, useState } from 'react';

function CarouselComponent() {
  const [Slider, setSlider] = useState(null);

  useEffect(() => {
    // 仅在客户端动态导入react-slick
    import('react-slick').then((module) => {
      setSlider(module.default);
    });
  }, []);

  // SSR阶段或组件加载中显示占位内容
  if (!Slider) {
    return <div className="carousel-placeholder">加载中...</div>;
  }

  return (
    <Slider dots infinite speed={500} slidesToShow={3} slidesToScroll={1}>
      <div>轮播项1</div>
      <div>轮播项2</div>
      <div>轮播项3</div>
    </Slider>
  );
}

export default CarouselComponent;

方法2：配置Vite处理SSR依赖 #

通过Vite配置，标记react-slick及其依赖为仅客户端处理，或模拟全局变量：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  ssr: {
    // 不让Vite在SSR打包时处理这些依赖，交由客户端加载
    noExternal: ['react-slick', 'enquire.js'],
  },
  define: {
    // 仅在SSR构建时模拟window对象，避免影响客户端逻辑
    ...(process.env.SSR ? { 'window': 'globalThis' } : {}),
  },
});

注意：模拟window可能存在潜在副作用，建议配合动态导入一起使用。

方法3：条件导入，跳过SSR阶段加载 #

通过环境判断，仅在浏览器环境下导入react-slick：

let Slider = null;
// 仅在浏览器环境中加载组件
if (typeof window !== 'undefined') {
  Slider = require('react-slick').default;
}

function CarouselComponent() {
  // SSR时返回空或SSR友好的替代内容
  if (!Slider) return null;

  return (
    <Slider {...yourCarouselSettings}>
      {/* 轮播内容 */}
    </Slider>
  );
}

export default CarouselComponent;

方法4：替换为SSR友好的轮播库 #

如果上述方法无法满足需求，可以考虑替换react-slick为原生支持SSR的轮播组件，比如react-responsive-carousel，这类库在设计时就规避了对window的直接依赖。

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