Demo breaking with the JSDelivr load

[ConnectedCat]

I tried cloning the repo just to check out the demo - both index and pong break with seemingly the same issue:

Uncaught ReferenceError: require is not defined                                                                      handtrack.min.js:2464:294
    <anonymous> https://cdn.jsdelivr.net/npm/handtrackjs@latest/dist/handtrack.min.js:2464
    <anonymous> https://cdn.jsdelivr.net/npm/handtrackjs@latest/dist/handtrack.min.js:1
    <anonymous> https://cdn.jsdelivr.net/npm/handtrackjs@latest/dist/handtrack.min.js:1

and

Uncaught TypeError: handTrack.load is not a function
    <anonymous> http://localhost:3005/js/index.js:86

If I switch to loading from <script src="lib/handtrack.js"> </script> instead of JSDelivr everything runs fine. But loading from <script src="handtrack.min.js"> </script> produces the same error. (seems like the libs folder still has the older version from 2018).

The same thing happens when trying to run this example https://github.com/victordibia/handtrack.js#import-via-script-tag :

Uncaught ReferenceError: require is not defined                                                                        handtrack.min.js:2464:294
    <anonymous> https://cdn.jsdelivr.net/npm/handtrackjs@latest/dist/handtrack.min.js:2464
    <anonymous> https://cdn.jsdelivr.net/npm/handtrackjs@latest/dist/handtrack.min.js:1
    <anonymous> https://cdn.jsdelivr.net/npm/handtrackjs@latest/dist/handtrack.min.js:1

and
Uncaught SyntaxError: await is only valid in async functions and async generators index.html:21:22

Line 22 in index.html is const predictions = await model.detect(img); from the example

[victordibia]

That is correct! I am currently working on bundling the new version of handtrack js which is under active dev. Will revert the demo to the previous version.

…

Sent from my iPhone

On Apr 13, 2021, at 16:32, Maxim Safioulline ***@***.***> wrote:  I tried cloning the repo just to check out the demo - both index and pong break with seemingly the same issue: Uncaught ReferenceError: require is not defined handtrack.min.js:2464:294 <anonymous> ***@***.***/dist/handtrack.min.js:2464 <anonymous> ***@***.***/dist/handtrack.min.js:1 <anonymous> ***@***.***/dist/handtrack.min.js:1 If I switch to loading from <script src="lib/handtrack.js"> </script> instead of JSDelivr everything runs fine. But loading from <script src="handtrack.min.js"> </script> produces the same error. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[victordibia]

I have updated the handtrack.min.js version to v0.0.13.

<script src="https://cdn.jsdelivr.net/npm/handtrackjs@0.0.13/dist/handtrack.min.js"> </script>

[ConnectedCat]

Does this mean the new version will not work with the <script> embed - npm only? And thank you for all your work!

[victordibia]

Hi @ConnectedCat,

I plan to make it happen (once I find time fix a couple bugs). The main challenge is correctly bundling up the umd module for handtrack.js which contains all dependencies. It appears some aspects of the tensorflow.js library are making that process fail. Will update when its ready. You can also attempt to bundle the npm installable version and share any insights you find.

-V.

[bandaloo]

I spent a while trying to figure out why i couldn't get the "open" and "closed" label with the example on the readme since it got changed to 0.0.13. I was able to bundle 0.1.2 with webpack though since the 0.1.2 jsdelivr doesn't work yet. Not anyone's fault but my own; I missed the note in the readme that warns about this.

[victordibia]

@ConnectedCat
Thanks to pointers from @bandaloo and @matthiasmiller , I have now updated the js web bundle to correctly load using webpack. It might take jsdelivr 24hrs to update @latest tag to the most recent bundle (v0.1.3).

Let me know if you still have issues!

Victor.