引入React Three Fiber的Canvas标签导致组件无法渲染求助

排查步骤与解决方案 #

• 校验依赖版本匹配
  确认package.json中Three.js版本为"three": "^0.182.0"（注意是r182而非18.2），当前React 18.2、@react-three/fiber 8.11.5与该版本兼容。执行命令清理并重装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

• 修正React 18渲染写法
  React 18必须使用createRoot初始化，避免混用旧版ReactDOM.render，确保index.js代码如下：

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import App from './App';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
  

• 设置容器基础尺寸
  默认需要父容器有明确尺寸，给根容器添加样式：

  #root {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  

  或直接给Canvas指定尺寸：

  <Canvas style={{ width: '100vw', height: '100vh' }} />
  

• 临时禁用StrictMode排查
  React 18的StrictMode会触发组件两次挂载，可能干扰Three.js初始化逻辑，暂时移除包裹：

  root.render(<App />);
  

• 新建干净项目验证配置
  若以上步骤无效，创建空白项目排除本地配置问题：

  npx create-react-app r3f-test
  cd r3f-test
  npm install three @react-three/fiber
  

  在App.js中添加基础Canvas代码测试是否正常渲染。

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