wasm js bindings generated by wasm-pack is not compatible with raw browser import

[wighawag]

This is a duplicate of the following issue on dojo.js repo dojoengine/dojo.js#268

But I thought it might be best to post it here too as the dojo.c readme also indicate the use of wasm-pack for generating the wasm and js binding.

Issue

To re-iterate the issue is that wasm-pack generate a js file that load wasm via es import import * as wasm from "./<lib>.wasm" which is not natively supported by browsers.

Some bundler will magically transform such import so browser can import it, some other (like vite) requires a community plugin to make it work. But ideally dojoengine should work without such external tool and as such it would be great if the tool used would generate js boilerplate compatible with browser (without requiring any other toool)

It seems using the wasm-bindgen cli to generate the js binding generate the correct js so it can be loaded in browser without any extra bundler

Reproduction Steps

generate import map for torii-client and its dependencies

set them up in the index.html and add a script that load the torii-client and you ll'see the following error:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/wasm". Strict MIME type checking is enforced for module scripts per HTML spec.

see reproduction repo : https://github.com/bug-reproduction/torii-wasm-in-browser

see codepen : https://codepen.io/wighawag/pen/RwzddBM

[Larkooo]

That issue is dojo.js specific. If you want to use dojo wasm bindings natively within the browser, you can use the script in scripts/build_wasm.sh. This will compile the wasm with the "no-modules" target which doesn't depend on a bundler

[wighawag]

no-modules is less than ideal, es module should work in modern browser.. I ll closed this anyway as this is indeed a dojo.js issue and I link your answer here : dojoengine/dojo.js#268 (comment)

(though, you should probably update the README to make note of this or update with a README with instruction for direct browser import)

[Larkooo]

no-modules is less than ideal, es module should work in modern browser.. I ll closed this anyway as this is indeed a dojo.js issue and I link your answer here : dojoengine/dojo.js#268 (comment)

(though, you should probably update the README to make note of this or update with a README with instruction for direct browser import)

You can take a look at this page that lists all of the targets that wasm-pack supports: https://rustwasm.github.io/docs/wasm-pack/commands/build.html#target

Web / no-modules should both work. In my case I suggested no-modules because it is the most barebones target and will work in almost any environment. This is for eg. what we do for Unity, where we load and initialize our WASM directly within the template HTML.

[wighawag]

I got you, I know of the options for wasm-pack, I reported the issue there too by the way : rustwasm/wasm-pack#1432

But for my setup I need es module so we can make use of library that import torii-wasm that way.

Actually the library I import is torii-client which uses es import to import torii-wasm and as such will not work with the js generateds by no-modules

In other word, I want to be able to do
const torii = await import("@dojoengine/torii-client");
and get going without needing to patch anything