Reactjs – Cannot get a simple cube to load using React-Three-Fiber

I am using the react-three-fiber getting started doc to render a cube on a page but nothing shows and I am at a bit of a loss.

Link: https://r3f.docs.pmnd.rs/getting-started/your-first-scene

I am getting this error and a blank page in the browser:

TypeError: undefined is not an object (evaluating 'o.ReactCurrentBatchConfig')

I am getting these warming in the Webpack build but I believe these have nothing to do with my issue:

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/

Here is my code:

my app component

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

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

export default App;

my cube component

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;

my 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 />
);

I tried deleting node-modules and package-lock.json but it had no effect.

looking up .ReactCurrentBatchConfig doesn’t provide anything meaningful.