Gatsby开发环境使用react-spring-3d-carousel报window is not defined错误如何解决

• 方案1：使用动态导入强制关闭组件SSR
  Gatsby SSR阶段不存在window对象，直接导入依赖浏览器API的组件会触发报错，可通过@loadable/component实现仅客户端加载组件：
  第一步安装依赖：npm install @loadable/component
  第二步修改组件导入逻辑：

  import loadable from '@loadable/component'
  // 关闭ssr配置，仅在客户端加载该组件
  const Carousel = loadable(() => import('react-spring-3d-carousel'), {
    ssr: false,
    fallback: <div>轮播加载中...</div>
  })
  
  // 后续正常使用Carousel组件即可
  

• 方案2：修正gatsby-node.js的webpack排除规则
  原有配置仅处理了生产构建的SSR阶段，未覆盖开发环境的SSR阶段，且正则匹配精度不足，修改为如下配置：

  exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
    // 同时匹配开发、生产两个SSR阶段
    if (stage === "build-html" || stage === "develop-html") {
      actions.setWebpackConfig({
        module: {
          // 精确匹配node_modules下的对应组件包
          rules: [{ test: /[\\/]node_modules[\\/]react-spring-3d-carousel[\\/]/, use: loaders.null() }],
        },
      })
    }
  }
  

  修改后重启Gatsby开发服务生效。
• 方案3：运行时判断后渲染组件
  在使用carousel的外层组件增加window存在性判断，仅在客户端环境下渲染组件：

  import { useState, useEffect } from 'react'
  import Carousel from 'react-spring-3d-carousel'
  
  const MyCarousel = () => {
    const [isClient, setIsClient] = useState(false)
    
    useEffect(() => {
      setIsClient(true)
    }, [])
  
    if (!isClient) return <div>轮播加载中...</div>
    // 客户端环境下才渲染轮播组件
    return <Carousel {/* 你的组件配置 */} />
  }
  
  export default MyCarousel
  

• 方案4：排查顶层调用逻辑
  确认是否存在在组件外部、顶级作用域直接调用react-spring-3d-carousel导出方法的逻辑，这类代码会在模块加载阶段就执行，不受上述配置影响，需将这类逻辑迁移到useEffect或组件内部的事件处理函数中。

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