Gatsby build fails when using spline

I am using spline in a React project and am using Gatsby to create static pages of this project. When I run Gatsby develop locally everything works fine and my spline project is showing on the page. But when I run Gatsby build it errors.

This is the code I am using

import Spline from '@splinetool/react-spline';

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

The error I am getting looks like this

Page data from page-data.json for the failed page "/threeDtest/": {
  "componentChunkName": "component---src-pages-three-dtest-js",
  "path": "/threeDtest/",
  "result": {
    "pageContext": {}
  },
  "staticQueryHashes": [
    "63159454"
  ]
}

failed Building static HTML for pages

ERROR #95313 

Building static HTML failed for path "/threeDtest/"

 vec4 texel = texture2D( tDiffuse, vUv );
  6282 |                gl_FragColor = texel;
> 6283 |        }`,RQ=new Ka(-1,1,1,-1,0,1),IE=c


  WebpackError: TypeError: Super constructor null of IE is not a constructor
  
  - runtime.js:6283 
    [gatsby-starter-default]/[@splinetool]/runtime/build/runtime.js:6283:64
  
  - runtime.js:6283 
    [gatsby-starter-default]/[@splinetool]/runtime/build/runtime.js:6283:185
  
  - bootstrap:19 
    gatsby-starter-default/webpack/bootstrap:19:1
  
  - static-entry.js:214 
    gatsby-starter-default/.cache/static-entry.js:214:27
  
  - index.js:155 
    [gatsby-starter-default]/[lodash.debounce]/index.js:155:1

Adding it via JS code or hosting the file locally gives the same error. It seems that the problem occurs on the import Spline line not in the return spline.

     const canvasRef = useRef(null)
 
  useEffect(() => {
    const canvas = canvasRef.current
      const spline = new Application(canvas);
      spline.load('https://prod.spline.design/2KMcF8q1JMXIHGGZ/scene.splinecode');
  }, [canvasRef])

     <Spline scene="../scene.splinecode" />

Solution

I was having the same problem. As you said, develop was not affected, only build. At first I thought it was a window issue in which the gatsby compiler wasn't able to get something expected from the window object to be available. Unfortunately it wasn't the case.

I could solve the problem by loading spline with React.lazy as explained in the documentation. And having Spline ignored during build.

In your case your spline component would look like this:

import React, { Suspense } from 'react';
const Spline = React.lazy(() => import('@splinetool/react-spline'));

const threeDtest = () => {
if (typeof window !== 'undefined') {
    return(
    <Suspense fallback={<div>Loading...</div>}>
        <Spline scene="https://prod.spline.design/2KMcF8q1JMXIHGGZ/scene.splinecode" />
    </Suspense>
)
    }

    return <span>Spline will be ignored</span>;
}

I hope this solves your usecase too!