[1.2.0] Cannot import framework-agnostic version

Squareys commented 1 year ago

Hi @hiukim !

Trying again to import 1.2.0 with the following code:

import {MindAR} from 'mind-ar/dist/mindar-image.prod.js';

This is the error I get:

[2023-03-03 17:00:00.377][error] Error while bundling components
[2023-03-03 17:00:00.377][error] X [ERROR] Could not resolve "util"
[2023-03-03 17:00:00.378][error] 
[2023-03-03 17:00:00.378][error]     ../../node_modules/mind-ar/dist/controller.03a2d8ae.js:3585:24:
[2023-03-03 17:00:00.378][error]       3585 │     this.util = require("util"), this.textEncoder = new this.uti...
[2023-03-03 17:00:00.378][error]            ╵                         ~~~~~~
[2023-03-03 17:00:00.378][error] 
[2023-03-03 17:00:00.378][error]   The package "util" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "--platform=node" to do that, which will remove this error.
[2023-03-03 17:00:00.378][error] 
[2023-03-03 17:00:00.378][error] X [ERROR] Could not resolve "fs"
[2023-03-03 17:00:00.378][error] 
[2023-03-03 17:00:00.378][error]     ../../node_modules/mind-ar/dist/controller.03a2d8ae.js:37283:24:
[2023-03-03 17:00:00.378][error]       37283 │       const t = require("fs");
[2023-03-03 17:00:00.378][error]             ╵                         ~~~~
[2023-03-03 17:00:00.378][error] 
[2023-03-03 17:00:00.378][error]   The package "fs" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "--platform=node" to do that, which will remove this error.
[2023-03-03 17:00:00.378][error] 
[2023-03-03 17:00:00.378][error] X [ERROR] Could not resolve "buffer"
[2023-03-03 17:00:00.378][error] 
[2023-03-03 17:00:00.378][error]     ../../node_modules/safe-buffer/index.js:3:21:
[2023-03-03 17:00:00.379][error]       3 │ var buffer = require('buffer')
[2023-03-03 17:00:00.379][error]         ╵                      ~~~~~~~~
[2023-03-03 17:00:00.379][error] 
[2023-03-03 17:00:00.379][error]   The package "buffer" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "--platform=node" to do that, which will remove this error.

I'm using esbuild to bundle for the browser. Any help is appreciated! 🙏

Best, Jonathan

Squareys commented 1 year ago

I believe the problem might be that mindar-image.prod.js is only for nodejs environments now, and can no longer be used in the browser. That's fairly unfortunate for the wonderland-mind-ar-tracking project, though :/

hiukim commented 1 year ago

I don't think mindar-image.prod.js is for nodejs environments. I have no problem importing it from a create-react-app. I'm not sure about using esbuild though. Haven't tried that.

Probably unrelated to the issue, but import {Controller} from 'mind-ar/dist/mindar-image.prod.js'; instead of import {MindAR} from 'mind-ar/dist/mindar-image.prod.js';

Squareys commented 1 year ago

import {Controller} from 'mind-ar/dist/mindar-image.prod.js';

That's great, though does not change much. It looks like the mindar-image.prod.js has various flags like "IS_BROWSER" and "IS_NODE", but I'm not sure how to pass them via esbuild. You can pass defines via --define:IS_BROWSER=true, but the way controller-939e6d85.js seems to be using them makes them incompatible with defines 🤔

Squareys commented 1 year ago

I think esbuild resolves require() calls at bundle time, which means that conditional requires() on flags that in the browser would always be true will actually get resolved eagerly :(

hiukim commented 1 year ago

I'm not sure where does the require calls come from. All the code in mindar repo is using import. Maybe it has something to do with the vite building process, which I'm not familiar with. Maybe @jmschrack has some ideas?

jmschrack commented 1 year ago

@Squareys MindAR 1.2.0 uses Vite to create the bundles. Vite uses Esbuild for transformation and minification, but bundling is done via Rollup.js

I think "tensorflow" may be the one causing the problem, although I suspect the actual bug may lie in either Esbuild or Vite (which passes commands to Esbuild).

Have you tried import {Controller} from 'mind-ar/src/image-target/controller.js' instead? This would have your instance of Esbuild handle the bundling and import instead of relying on a pre-bundled version.

Squareys commented 1 year ago

@jmschrack Thank you for helping out here! Highly appreciated 🙏

With your suggestion

import {Controller} from 'mind-ar/src/image-target/controller.js'

I'm running into trouble with the worker that is imported transitively:

[2023-03-07 20:10:34.395][error] X [ERROR] No matching export in "../../node_modules/mind-ar/src/image-target/compiler.worker.js?worker&inline" for import "default"
[2023-03-07 20:10:34.395][error] 
[2023-03-07 20:10:34.395][error]     ../../node_modules/mind-ar/src/image-target/compiler.js:2:7:
[2023-03-07 20:10:34.395][error]       2 │ import CompilerWorker  from "./compiler.worker.js?worker&inline";
[2023-03-07 20:10:34.396][error]         ╵        ~~~~~~~~~~~~~~
[2023-03-07 20:10:34.396][error] 
[2023-03-07 20:10:34.396][error] X [ERROR] No matching export in "../../node_modules/mind-ar/src/image-target/controller.worker.js?worker&inline" for import "default"
[2023-03-07 20:10:34.396][error] 
[2023-03-07 20:10:34.396][error]     ../../node_modules/mind-ar/src/image-target/controller.js:3:7:
[2023-03-07 20:10:34.396][error]       3 │ import ControllerWorker  from "./controller.worker.js?worker&inline";
[2023-03-07 20:10:34.396][error]         ╵        ~~~~~~~~~~~~~~~~
[2023-03-07 20:10:34.396][error] 
[2023-03-07 20:10:34.396][error] 2 errors
[2023-03-07 20:10:34.396][error] node:child_process:910
[2023-03-07 20:10:34.396][error]     throw err;
[2023-03-07 20:10:34.396][error]     ^
[2023-03-07 20:10:34.396][error] 
[2023-03-07 20:10:34.397][error] Error: Command failed: C:\Program Files\Wonderland\WonderlandEngine\templates\package\node_modules\esbuild-windows-64\esbuild.exe C:/Repos/wonderland-mind-ar-tracking/examples/image-tracking/cache/js/_editor_index.js --bundle --sourcemap --define:WL_EDITOR=true
[2023-03-07 20:10:34.397][error]     at checkExecSyncError (node:child_process:871:11)
[2023-03-07 20:10:34.397][error]     at Object.execFileSync (node:child_process:907:15)
[2023-03-07 20:10:34.397][error]     at Object.<anonymous> (C:\Program Files\Wonderland\WonderlandEngine\templates\package\node_modules\esbuild\bin\esbuild:211:28)
[2023-03-07 20:10:34.397][error]     at Module._compile (node:internal/modules/cjs/loader:1159:14)
[2023-03-07 20:10:34.397][error]     at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
[2023-03-07 20:10:34.397][error]     at Module.load (node:internal/modules/cjs/loader:1037:32)
[2023-03-07 20:10:34.397][error]     at Module._load (node:internal/modules/cjs/loader:878:12)
[2023-03-07 20:10:34.397][error]     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
[2023-03-07 20:10:34.397][error]     at node:internal/main/run_main_module:23:47 {
[2023-03-07 20:10:34.397][error]   status: 1,
[2023-03-07 20:10:34.397][error]   signal: null,
[2023-03-07 20:10:34.397][error]   output: [ null, null, null ],
[2023-03-07 20:10:34.397][error]   pid: 23948,
[2023-03-07 20:10:34.397][error]   stdout: null,
[2023-03-07 20:10:34.397][error]   stderr: null
[2023-03-07 20:10:34.398][error] }
[2023-03-07 20:10:34.398][error] 
[2023-03-07 20:10:34.398][error] Node.js v18.12.1

Is that possibly a special rollup.js feature to be able to import workers like that?

* Edit: So yes, indeed, I'd need the esbuild-plugin-inline-worker, but we're currently running esbuild through the executable, which doesn't support plugins. Guess that's on my side now.

Thank you very much!

Squareys commented 1 year ago

I figured it out with the suggestion of @jmschrack, here's our solution:

On wonderland-mind-ar-tracking, we build the project through esbuild with suggested import and the afforementioned plugin for bundling workers.
The dist folder will contain a final bundle ES module that can be used from any Wonderland Engine project by simply installing the npm package.

Closing--highly grateful for your help!

jmschrack commented 1 year ago

Glad I could help!

@hiukim I think it might be useful to note in the documentation about this setup with esbuild?

If you are using esbuild and running into require errors, you can try importing the classes directly Example: import {MindARThree} from 'mind-ar/src/image-target/three.js'
You'll need to use the esbuild-plugin-inline-worker

hiukim commented 1 year ago

Yes, totally! I'll put that in. thx

hiukim / mind-ar-js

[1.2.0] Cannot import framework-agnostic version #360