Next.js 14构建失败：含Spline组件的Blob组件引发异常

可能的问题根源 #

• 自定义delay函数干扰了构建阶段的模块导入逻辑，Next.js构建需要同步解析模块，手动延迟会触发流程异常。
• @splinetool/react-spline组件可能存在与Next.js 14客户端组件不兼容的代码（比如模块顶层访问浏览器API），导致Node环境构建时报错。
• Suspense设置fallback={null}不符合Next.js构建校验规则，或未正确处理组件加载状态。

修复步骤 #

1. 移除自定义延迟函数 #

React.lazy本身已支持按需加载模块，手动延迟会破坏构建时的模块解析流程，替换导入代码：

// 原延迟导入替换为标准懒加载
const Spline = lazy(() => import("@splinetool/react-spline"));

2. 改用Next.js动态导入禁用SSR #

若Spline组件在模块层面访问浏览器API，用Next.js的dynamic替代React.lazy，强制组件仅在客户端加载：

import dynamic from 'next/dynamic';

// 禁用SSR，避免构建时Node环境API冲突
const Spline = dynamic(() => import("@splinetool/react-spline"), {
  ssr: false,
  loading: () => null, // 可替换为自定义加载占位符
});

3. 优化窗口resize逻辑（避免潜在警告） #

添加window存在性检查，确保仅在客户端执行resize逻辑：

useEffect(() => {
  if (typeof window === 'undefined') return;

  const handleResize = () => setWidth(window.innerWidth);
  handleResize();

  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize);
}, []);

4. 调整Suspense fallback内容 #

将fallback={null}替换为与组件容器尺寸匹配的占位元素，避免构建警告：

<Suspense fallback={<div className="mt-6 md:-mt-28 lg:-mt-32 xl:-mt-20 h-[60%] md:h-auto"></div>}>
  <Spline scene={scene} onLoad={() => setIsBlobLoading(false)} />
</Suspense>

5. 更新Spline组件版本 #

确保使用最新版组件，修复已知的Next.js兼容性问题：

npm update @splinetool/react-spline

完整修复后的组件代码 #

"use client";

import React, { useEffect, useState } from "react";
import dynamic from 'next/dynamic';

interface BlobProps {
  setIsBlobLoading: (value: boolean) => void;
}

const Spline = dynamic(() => import("@splinetool/react-spline"), {
  ssr: false,
  loading: () => null,
});

const Blob: React.FC<BlobProps> = ({ setIsBlobLoading }) => {
  const [width, setWidth] = useState<number>(0);
  const scene =
    width < 768
      ? "https://prod.spline.design/4fw6UsesTpkABa3N/scene.splinecode"
      : width < 1024
        ? "https://prod.spline.design/8TpjCUqUDCKdBWU4/scene.splinecode"
        : width < 1440
          ? "https://prod.spline.design/hITryAhlvsA20UJ0/scene.splinecode"
          : "https://prod.spline.design/0Fktb5VBB3QzS3Aw/scene.splinecode";

  useEffect(() => {
    if (typeof window === 'undefined') return;

    const handleResize = () => setWidth(window.innerWidth);
    handleResize();

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return (
    <div className="mt-6 md:-mt-28 lg:-mt-32 xl:-mt-20 h-[60%] md:h-auto">
      <Spline scene={scene} onLoad={() => setIsBlobLoading(false)} />
    </div>
  );
};

export default Blob;

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