Gatsby build fails when using spline

[perabuis]

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

adding it via JS code or hosting the file locally gives the same error

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" />