I'm working on a Next.js project and have integrated a Spline object using the @splinetool/react-spline package. However, when I navigate to the page containing the Spline object, I encounter an infinite loop of warnings in the console:
[.WebGL-00003D440AA60E00] GL_INVALID_FRAMEBUFFER_OPERATION: Framebuffer is incomplete: Attachment has zero size.
This warning floods my console, but it doesn't seem to affect the performance or functionality of the Spline object or the application itself. Below is the snippet of my implementation:
import Spline from "@splinetool/react-spline";
...
export default function LandingFeatureSection() {
// JSX structure
return (
<section className="container flex flex-col my-20">
...
<motion.div
initial="hide"
whileInView="show"
viewport={{ once: true }}
variants={fadeRightVariant(0.5, 0.5)}
className="flex flex-col items-center md:items-start relative w-full lg:px-4 xl:px-16 pb-20 lg:pb-0"
>
<div className="hidden xl:block absolute -top-16 -right-20 scale-75">
<Spline scene="https://prod.spline.design/UZdKMgnx5mlBAL-3/scene.splinecode" />
</div>
...
</motion.div>
...
</section>
);
}
I'm not sure what causes this issue or how to resolve it. The warning appears only when the Spline component is rendered, and removing it stops the warnings. Does anyone know why this is happening and how to fix it?