React中嵌入Spline组件出现Cannot read properties of undefined错误

问题复现 #

在React项目中引入@splinetool/react-spline组件并渲染指定场景时，出现以下错误：

Cannot read properties of undefined (reading 'A')
TypeError: Cannot read properties of undefined (reading 'A')
    at ue (http://localhost:3000/static/js/bundle.js:49456:19)
    at xe (http://localhost:3000/static/js/bundle.js:49586:36)
    at Object.or [as jsx] (http://localhost:3000/static/js/bundle.js:49532:16)
    at http://localhost:3000/static/js/bundle.js:49909:32
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:24280:22)
    at updateForwardRef (http://localhost:3000/static/js/bundle.js:27529:24)
    at beginWork (http://localhost:3000/static/js/bundle.js:29590:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:14536:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:14580:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:14637:35)

使用的代码如下：

import React from "react";
import Spline from "@splinetool/react-spline";

export default function App() {
  return (
    <div className="App">
      <Spline scene="https://prod.spline.design/o3v1HPnOwXUx88B6/scene.splinecode" />
    </div>
  );
}

移除Spline组件后网页恢复正常，确认问题源于该组件。

解决方案 #

• 更新组件到最新版本
  旧版本的@splinetool/react-spline可能存在React版本兼容问题（尤其是React 18），执行以下命令更新到最新版：

  npm install @splinetool/react-spline@latest
  # 或使用yarn
  yarn add @splinetool/react-spline@latest
  

• 验证场景链接有效性
  重新在Spline编辑器导出场景，复制新的scene链接替换现有链接，确保链接未失效或格式错误。

• 清除缓存并重建项目
  清除依赖缓存并重新安装，再重启开发服务器：

  # npm
  npm cache clean --force
  rm -rf node_modules package-lock.json
  npm install
  npm start
  
  # yarn
  yarn cache clean
  rm -rf node_modules yarn.lock
  yarn install
  yarn start
  

• 临时关闭React Strict Mode
  React 18的Strict Mode会触发组件两次渲染，部分第三方库可能不兼容。移除index.js中的<React.StrictMode>标签，测试错误是否消失：

  // 原代码
  ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
  
  // 修改后
  ReactDOM.createRoot(document.getElementById('root')).render(
    <App />
  );
  

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