使用样条线时 Gatsby 构建失败

Question

我在 React 项目中使用样条线，并使用 Gatsby 创建该项目的静态页面。 当我在本地运行 Gatsby 开发时，一切正常，我的样条项目显示在页面上。 但是当我运行 Gatsby 时，它构建错误。

这是我正在使用的代码

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

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

我收到的错误看起来像这样

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

通过 JS 代码添加它或在本地托管文件会产生相同的错误。看来问题出现在导入样条线上而不是返回样条线上。

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

Answer 1

我也有同样的问题。开发不受影响。也许是

window

问题？