Next.js+React开发Web应用遇TypeError：无法读取ReactCurrentOwner属性

我刚开始用Next.js结合React开发Web应用，遇到了未处理的运行时错误：TypeError: Cannot read properties of undefined (reading 'ReactCurrentOwner')。我怀疑是依赖版本不匹配导致的，但回退版本后问题依然存在。

相关组件代码 #

'use client';
import * as THREE from "three";
import { Canvas } from "@react-three/fiber";
import { ContactShadows, Float, Environment } from "@react-three/drei";
import { Suspense, useEffect, useRef, useState } from "react";
import gsap from "gsap";
import { div } from "three/webgpu";
import Geometries from "three/src/renderers/common/Geometries.js";

export default function Shapes() {
    return (
        <div className="row-span-1 row-start-1 -mt-9 aspect-square md:col-span-1 md:col-start-2 md:mt-0">
            <Canvas className="z-0" shadows gl={{antialias:false}} dpr={[1, 1.5]} camera={{position: [0, 0, 25], fov:30, near:1, far:40}}>
                <Suspense fallback={null}>
                    <ContactShadows
                        position={[0, -3.5, 0]}
                        opacity={0.65}
                        scale={40}
                        blur={1}
                        far={9} 
                    />
                    <Environment preset="studio" />
                </Suspense>
            </Canvas>
        </div>
    );
}

package.json依赖列表 #

"dependencies": { 
  "@prismicio/client": "^7.13.1", 
  "@prismicio/next": "^1.7.1", 
  "@prismicio/react": "^2.9.1", 
  "@react-three/drei": "^9.120.4", 
  "@react-three/fiber": "^8.17.10", 
  "@types/three": "^0.170.0", 
  "clsx": "^2.1.1", 
  "gsap": "^3.12.5", 
  "next": "^15.1.0", 
  "react": "^18.2.0", 
  "react-dom": "^18.2.0", 
  "three": "^0.170.0" 
}

排查与解决步骤 #

• 移除无用导入：代码中导入的three/webgpu的div和three/src/renderers/common/Geometries.js未被使用，且可能触发依赖冲突，直接删除这两行导入。
• 调整依赖版本兼容性：
  • Next.js 15处于预览阶段，生态适配不完善，建议降级到稳定版（如14.2.x）。
  • 确认@react-three/fiber与@react-three/drei版本匹配，可参考官方文档的兼容版本组合，比如使用@react-three/fiber@8.16.x搭配@react-three/drei@9.110.x。
• 清理缓存重装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

• 检查React实例唯一性：运行npm ls react查看是否存在多个React版本，重复安装会导致环境冲突。
• 确认客户端组件配置：已添加'use client'指令正确，但需确保父组件未在服务端渲染该组件。

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