Could not resolve react in "@react-three/drei" using deno-loader

[nestarz]

Description

I encountered an error while using the deno-loader plugin in my Deno project. The error message indicates that it could not resolve the "react" module only when using @react-three/drei. It's doing fine with @react-three/fiber.

Error Message

✘ [ERROR] Could not resolve "react" [plugin deno-loader]
    ../../../Library/Caches/deno/deno_esbuild/tunnel-rat@0.1.2_react@18.2.0/node_modules/tunnel-rat/dist/index.js:1:18:
      1 │ import React from 'react';
        ╵                   ~~~~~~~
...
error: Uncaught (in promise) Error: Build failed with 3 errors:
../../../Library/Caches/deno/deno_esbuild/@react-three/drei@9.105.2_@react-three+fiber@8.16.1__react@18.2.0__three@0.163.0_react@18.2.0_three@0.163.0/node_modules/@react-three/drei/web/Html.js:3:26: ERROR: [plugin: deno-loader] Could not resolve "react-dom/client"
../../../Library/Caches/deno/deno_esbuild/@react-three/drei@9.105.2_@react-three+fiber@8.16.1__react@18.2.0__three@0.163.0_react@18.2.0_three@0.163.0/node_modules/@react-three/drei/web/ScrollControls.js:3:26: ERROR: [plugin: deno-loader] Could not resolve "react-dom/client"
../../../Library/Caches/deno/deno_esbuild/tunnel-rat@0.1.2_react@18.2.0/node_modules/tunnel-rat/dist/index.js:1:18: ERROR: [plugin: deno-loader] 

Steps to Reproduce

1. Install the deno-loader plugin in a Deno project.
2. Attempt to import the "@react-three/drei" module using esbuild and the deno-loader in a JavaScript or TypeScript file.
3. Run the Deno script.

Expected Behavior

The deno-loader plugin should be able to resolve the "react" module and allow its usage in the Deno project.

Actual Behavior

The deno-loader plugin fails to resolve the "react" module, resulting in the aforementioned error.

Environment

• Deno version: 1.42
• deno-loader version: 0.10
• Operating System: macos
• deno.json imports:

{ 
...
"imports": {
     "@react-three/fiber": "npm:@react-three/fiber@8.16.1",
    "@react-three/drei": "npm:@react-three/drei@9.105.2",
    "react": "npm:react@^18.2.0",
    "react/": "npm:/react@^18.2.0/",
    "react-dom": "npm:react-dom@^18.2.0",
    "react-dom/": "npm:/react-dom@^18.2.0/"
  }
}

Additional Information

• The error occurs when importing the "react" module from the "tunnel-rat" package.
• The file path in the error message suggests that the "react" module is being imported from a cached location.

Possible Cause

It seems that the deno-loader plugin is unable to resolve the "react" module correctly, possibly due to a configuration issue or a compatibility problem between the plugin and the "react" module.

I would appreciate any assistance or guidance in resolving this issue. Please let me know if you need any further information or clarification.

Thank you for your attention to this matter.

[twosaturdayscode]

Hey! Try give a look at my comment on a similar issue: #127 (comment)

[lucacasonato]

This is a bug in @react-three/drei and tunnel-rat. They are both importing react / react-dom without declaring the dependencies in their package.json. This also does not work in pnpm.

[nestarz]

@lucacasonato It is declared in the package.json peerDependencies field here. Also, @react-three/drei does import successfully on Deno, but not using esbuild-deno-loader - same goes for tunnel-rat.

Here a reproduction example:
main_test.ts

import * as drei from "npm:@react-three/drei@9.114.0";
console.log(drei);

main.ts

import * as esbuild from "npm:esbuild@0.20.2";
import { denoPlugins } from "jsr:@luca/esbuild-deno-loader@^0.10.3";

// this works
import * as dreiOnDeno from "npm:@react-three/drei@9.114.0";
console.log(!!dreiOnDeno);

// this doesn't
const result = await esbuild.build({
  plugins: [...denoPlugins()],
  entryPoints: ["./main_test.ts"],
  outfile: "./dist/bytes.esm.js",
  bundle: true,
  format: "esm",
});
console.log(result.outputFiles);
esbuild.stop();

deno.json

{
  "tasks": {
    "dev": "deno run --watch main.ts"
  },
  "imports": {
    "@react-three/drei": "npm:@react-three/drei@^9.114.0",
    "@std/assert": "jsr:@std/assert@1",
    "esbuild": "npm:esbuild@^0.24.0",
    "react": "npm:react@^18.3.1",
    "react-dom": "npm:react-dom@^18.3.1"
  }
}