React Three-fiber中引入Canvas组件出现useMemo加载错误求助

项目依赖 #

{
  "dependencies": {
    "@react-three/drei": "9.14.3",
    "@react-three/fiber": "8.0.26",
    "@react-three/postprocessing": "2.4.4",
    "three": "^0.141.0"
  }
}

问题详情 #

• 初始代码用Suspense包裹Canvas组件，页面加载报错
• 尝试用useMemo包裹Canvas后问题仍存在，错误源自react-three-fiber.esm.js第119行：React.useMemo(() => extend(THREE), []);
• 当前使用Node.js版本为8.19.2

核心原因 #

1. Node.js版本过低：@react-three/fiber v8.x版本要求Node.js最低版本为14.x，8.19.2不支持该版本依赖所需的ES模块语法及React Hooks特性，导致内部useMemo调用兼容失败。
2. Suspense与useMemo用法错误：
   • Suspense不应包裹Canvas，需用于包裹内部异步加载的子组件（如Box）
   • 错误地将useMemo返回的React元素当作组件渲染，违反React组件渲染规范

解决步骤 #

1. 升级Node.js版本 #

将Node.js升级至14.x及以上的LTS版本（推荐18.x），可通过nvm或官方安装包完成升级：

• 使用nvm：

  nvm install 18
  nvm use 18
  

2. 修正组件代码 #

移除错误的useMemo用法，调整Suspense的位置至Canvas内部，仅包裹异步加载的子组件：

import React, { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import Box from "./Box";

const ThreeD = () => { 
  return (
    <div>
      <Canvas shadows>
        {/* 若Box包含异步资源（模型/纹理），用Suspense包裹并设置 fallback */}
        <Suspense fallback={<mesh><boxGeometry /><meshBasicMaterial color="#ccc" /></mesh>}>
          <Box />
        </Suspense>
      </Canvas>
    </div>
  );
};

export default ThreeD;

3. 验证依赖安装 #

升级Node后，重新安装依赖确保版本兼容：

rm -rf node_modules package-lock.json
npm install

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