使用React-Three-Fiber无法加载简单立方体的问题求助

按照react-three-fiber入门文档尝试渲染立方体，页面无内容且空白，浏览器抛出错误：
TypeError: undefined is not an object (evaluating 'o.ReactCurrentBatchConfig')

Webpack构建时出现如下警告：

WARNING in ./node_modules/@react-three/fiber/dist/events-321b05fb.esm.js 2260:12-30
export 'unstable_act' (imported as 'React') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, act, cache, cloneElement, createContext, createElement, createRef, forwardRef, isValidElement, lazy, memo, startTransition, unstable_useCacheRefresh, use, useActionState, useCallback, useContext, useDebugValue, useDeferredValue, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useOptimistic, useReducer, useRef, useState, useSyncExternalStore, useTransition, version)
 @ ./node_modules/@react-three/fiber/dist/react-three-fiber.esm.js 1:0-228 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 2:0-557 215:11-30 236:22-28 249:30-48 258:2-27 261:40-50 281:85-90 298:35-48 301:39-44 312:29-51
 @ ./frontend/components/three_components/Cube.jsx 1:0-44 5:38-44
 @ ./frontend/components/App.jsx 1:0-47 3:42-46
 @ ./frontend/main.js 3:0-39 5:45-48

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  bundle.js (984 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (984 KiB)
      bundle.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

使用的代码如下：

App组件 #

import Cube from './three_components/Cube.jsx';

const App = () => {
  return (
      <Cube />
  );
};

export default App;

Cube组件 #

import { Canvas } from '@react-three/fiber';

function Cube(props) {
  return (
    <div id='container'>
      <Canvas>
        <mesh>
          <boxGeometry args={[2, 2, 2]} />
          <meshStandardMaterial />
        </mesh>
        <ambientLight intensity={0.1} />
        <directionalLight color='red' position={[0, 0, 5]} />
      </Canvas>
    </div>
  );
}

export default Cube;

main.js #

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './components/App.jsx';

let root = createRoot(document.getElementById('root'))


root.render(
      <App />
);

已尝试删除node_modules和package-lock.json重新安装，无效；查找ReactCurrentBatchConfig相关信息未获有效内容。

这个问题核心是React与@react-three/fiber版本不兼容：

• 浏览器报错的ReactCurrentBatchConfig是React内部API，只有特定版本的React会暴露该接口，当前使用的@react-three/fiber版本依赖了这个API，但你的React版本未提供。
• Webpack警告里的unstable_act找不到，也佐证了版本不匹配的问题。

解决步骤：

1. 打开package.json，查看react、react-dom和@react-three/fiber的版本号。
2. 确保版本兼容：
   • 若使用React 18.x，@react-three/fiber需升级到v9.x及以上版本。
   • 若使用React 17.x或更低，需降级@react-three/fiber到v8.x版本（v8是最后一个支持React 17的大版本）。
3. 执行以下命令重新安装依赖：

   # 先卸载现有依赖
   npm uninstall react react-dom @react-three/fiber
   # 安装React 18 + R3F v9的兼容组合
   npm install react@^18.0.0 react-dom@^18.0.0 @react-three/fiber@^9.0.0
   # 若坚持使用React 17，安装React 17 + R3F v8的组合
   # npm install react@^17.0.0 react-dom@^17.0.0 @react-three/fiber@^8.0.0
   

4. 重新启动项目，检查页面是否正常渲染立方体。

注：你的代码逻辑本身无问题，版本兼容后即可正常运行。

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