JavaScript build broken (online demo page)

[farindk]

When building libheif to JS/WASM (current master branch, but also for v1.18.0) with

libheif/buildjs$ USE_WASM=1 ../build-emscripten.sh ..

I get the libheif.js and libheif.wasm files, but when I insert them into the demo-website https://strukturag.github.io/libheif/, I get the following error in the browser console:

Uncaught TypeError: libheif.heif_get_version is not a function
    onload .../index.html:314

This has worked before, but I now cannot even build the old versions anymore. Any ideas what the reason for this could be?

I'm using emcc 3.1.66.

CC: @fancycode @EzraH442

[EzraH442]

This has been an issue in the past that has been solved by reloading the page (#1174 (comment))

I think it's caused by the libheif object getting called before it finishes loading - I don't have much time to work on this but can probably get a fix in before next week

[farindk]

Ah, thanks, I didn't see that this is a possible duplicate.

I tried it again and think that it may still be another issue. If I revert to the old gh-pages version (c95ff2a), it is in fact the behavior that it only works after a reload.

With the current compilation (63785e7), however, it even doesn't work after a reload, but the error in the console is the same.

[EzraH442]

I did some digging and think I found the issue:

The gh-pages branch does not initialize the webassembly module:

libheif/index.html

Line 314 in 63785e7

console.log("Using libheif", libheif.heif_get_version());

libheif/index.html

Line 315 in 63785e7

var demo = new HeifDemo(libheif);

while the examples on the master branch do:

libheif/examples/demo.html

Line 318 in bb3b652

var demo = new HeifDemo(libheif());

Therefore when the (new) libheif.js and libheif.wasm files are used with the old gh-pages html file, the libheif variable is not webassembly module but actually a function that initializes and returns the webassembly module. So calling heif_get_version() on it throws an error.

I'm not sure why the gh-pages branch is using this outdated file but it could probably be replaced by the examples/demo.html file on the master branch,

As a sidenote, another issue I ran into when testing the demo.html file with emrun was that I would get the issue:

Uncaught (in promise) sync fetching of the wasm failed: you can preload it to Module["wasmBinary"] manually, or emcc.py will do that for you when generating HTML (but not JS)

The solution was to manually fetch the wasm binary file and pass it in as a parameter to the libheif() function, e.g.:

    window.onload = function() {
        if (typeof libheif === "undefined") {
            alert("libheif could not be loaded, please check your browser console for details.");
            return;
        }

        fetch('libheif.wasm')
            .then((res) => res.arrayBuffer())
            .then((wasmBinary) => {
                var demo = new HeifDemo(libheif({ wasmBinary: wasmBinary }));
                // ....

I'm not sure if this would also be an issue on Github pages but if it is, the solution is above.

[farindk]

Thank you, @EzraH442 . With your proposed changes, I managed to make the page work again. This is great. Without your hints, I would have searched forever...