使用Spline时Gatsby Build构建失败问题求助

嘿，我来帮你解决这个头疼的问题！你遇到的情况是典型的服务端渲染（SSR）与浏览器依赖组件冲突问题——Spline的React组件需要调用浏览器环境里的专属API（比如window对象），但Gatsby执行build时是在Node.js环境下生成静态HTML，这个环境里并没有这些浏览器专属对象，所以才会触发报错。

下面给你两个亲测有效的解决办法：

方法一：动态导入Spline并禁用服务端渲染 #

借助@loadable/component工具，我们可以让Spline组件只在客户端环境加载，完全避开服务端渲染的阶段：

1. 先安装依赖：

npm install @loadable/component

2. 修改你的组件代码：

import loadable from '@loadable/component'

// 动态导入Spline，明确禁用服务端渲染
const Spline = loadable(() => import('@splinetool/react-spline'), {
  ssr: false,
  fallback: <div>加载3D场景中...</div> // 加载过程中的占位提示
})

const threeDtest = () => {
  return(
    <div>
      <Spline scene="https://prod.spline.design/2KMcF8q1JMXIHGGZ/scene.splinecode" />
    </div>
  )
}

export default threeDtest

方法二：判断客户端环境后再渲染Spline #

通过React的状态和副作用钩子，我们可以先确认当前处于浏览器环境，再渲染Spline组件：

import Spline from '@splinetool/react-spline';
import { useEffect, useState } from 'react';

const threeDtest = () => {
  const [isBrowser, setIsBrowser] = useState(false);

  // 组件挂载后，确认处于浏览器环境
  useEffect(() => {
    setIsBrowser(true);
  }, []);

  return(
    <div>
      {/* 仅在浏览器环境下渲染Spline */}
      {isBrowser && <Spline scene="https://prod.spline.design/2KMcF8q1JMXIHGGZ/scene.splinecode" />}
    </div>
  )
}

export default threeDtest

两种方法都能解决问题，我个人更推荐第一种，因为@loadable/component是Gatsby官方推荐的处理这类场景的工具，使用起来更稳定规范。

备注：内容来源于stack exchange，提问作者Silke Janssens