Error: Module name "react" has not been loaded yet for context try to reproduce included threejs-fiber example

I can successfully run the threejs-fiber.ipynb with the included threejs-fiber.bundle.js without any issues.

Let's try and build the bundle by ourselves:

cp -r threejs-fiber /tmp && cd /tmp/threejs-fiber
python3.11 -m venv ~/.virtualenvs/ipyreact-threejs
source ~/.virtualenvs/ipyreact-threejs/bin/activate
# ipyreact 0.4.1
pip install ipyreact notebook
# esbuild 0.20.2
npm install --global esbuild
npm install @react-three/drei@9.68.6 @react-three/fiber@8.13.0
esbuild ./threejs-fiber.js --bundle --outfile=./threejs-fiber.bundle.js --format=esm --external:react --external:react-dom --external:react-reconciler --external:react-reconciler/constants --target=esnext

With fixed drei and fiber versions, this gives us the error below.

Let's try with unset versions, i.e. latest:

# remove outputs from previous esbuild attempt
rm -rf node_modules package package-lock.json
# now we get 9.102.5 and 8.15.19
npm install @react-three/drei @react-three/fiber
esbuild ./threejs-fiber.js --bundle --outfile=./threejs-fiber.bundle.js --format=esm --external:react --external:react-dom --external:react-reconciler --external:react-reconciler/constants --target=esnext

This builds successfully, with one warning, see below.

However, now when I run the threejs-fiber.ipynb notebook cell with ipyreact.define_module(), I see the following error:

threejs-fiber status: Error loading module: Error: Module name "react" has not been loaded yet for context: _. Use require([]) https://requirejs.org/docs/errors.html#notloaded

If I run esbuild without the --external:... params to exclude react (just to check!), the define_module() is successful, but the cell that's supposed to show the BoxWidget gives the following eror: "Cannot read properties of null (reading 'useMemo')"

I would be super grateful for any help with this. These symptoms are the similar to what I'm seeing trying to wrap a reactflow example with ipyreact.

Based on the fact that esbuild fails with versions that were known to be good, I am suspecting that some change in esbuild is causing these issues. (although I have now also tried out esbuild 0.19.12 and it yields exactly the same behaviour)

error with first esbuild attempt with fixed drei and fiber versions

✘ [ERROR] No matching export in "node_modules/three/build/three.module.js" for import "sRGBEncoding"

    node_modules/@react-three/drei/core/useEnvironment.js:2:66:
      2 │ import { CubeReflectionMapping, EquirectangularReflectionMapping, sRGBEncoding, LinearEncoding, CubeTextureLoader } from 'three';
        ╵                                                                   ~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/three/build/three.module.js" for import "LinearEncoding"

    node_modules/@react-three/drei/core/useEnvironment.js:2:80:
      2 │ import { CubeReflectionMapping, EquirectangularReflectionMapping, sRGBEncoding, LinearEncoding, CubeTextureLoader } from 'three';
        ╵                                                                                 ~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/three/build/three.module.js" for import "LinearEncoding"

    node_modules/@react-three/drei/core/SpotLight.js:3:76:
      3 │ ...rt { Vector3, CylinderGeometry, Matrix4, WebGLRenderTarget, RGBAFormat, LinearEncoding, ShaderMaterial, DoubleSide, RepeatWrapping } from 'three';
        ╵                                                                            ~~~~~~~~~~~~~~

3 errors

warning with second esbuild attempt

▲ [WARNING] Constructing "StatsImpl" will crash at run-time because it's an import namespace object, not a constructor [call-import-namespace]

    node_modules/@react-three/drei/core/Stats.js:11:44:
      11 │   const stats = useEffectfulState(() => new StatsImpl(), []);
         ╵                                             ~~~~~~~~~

  Consider changing "StatsImpl" to a default import instead:

    node_modules/@react-three/drei/core/Stats.js:3:7:
      3 │ import * as StatsImpl from 'stats.js';
        │        ~~~~~~~~~~~~~~
        ╵        StatsImpl

1 warning

  threejs-fiber.bundle.js  3.6mb ⚠️

⚡ Done in 135ms

Start with the included threejs-fiber.js and threejs-fiber.ipynb, and reproduce the esbuild commands with the fixed and latest @react-three versions. Inspect the ipyreact.define_module() loading path and the external React configuration; done means the bundle loads without the RequireJS error and the notebook renders the BoxWidget.