Promise remains in pending mode

[johndoe46]

Hello,

I'm trying to setup wasm-vips but I fail to do so. Given the following example:

<script type="module">
    import Vips from './node_modules/wasm-vips/lib/vips-es6.js';
    function resolved(result) {
        console.log(result); // never displayed
    }

    function rejected(result) {
        console.error(result); // never displayed
    }

    let prms = Vips();
    prms.then(resolved, rejected);
    console.log(prms); // is a pending Promise

    setInterval(function(){
        console.log(prms); // always pending
    }, 2000)
</script>

Browser is Firefox 120.0.1 and index.html is served with those headers:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

I'm a bit stuck, surely I did something wrong (I'm no full-time JS dev).

Any idea for me ?

[kleisauke]

I could not reproduce this with emrun, which should set these COOP/COEP headers automatically. https://github.com/emscripten-core/emscripten/blob/3.1.51/emrun.py#L641-L642

PS> docker run -p 8080:80 --rm -v ${PWD}:/src emscripten/emsdk:3.1.51 emrun --port 80 --no_browser /src
# Visit http://localhost:8080/index.html

What does self.crossOriginIsolated return? You could also try to optimize the startup time by disabling the dynamic modules.

@@ -8,7 +8,10 @@
         console.error(result); // never displayed
     }

-    let prms = Vips();
+    let prms = Vips({
+        // Optimize startup time by disabling the dynamic modules
+        dynamicLibraries: []
+    });
     prms.then(resolved, rejected);
     console.log(prms); // is a pending Promise

Although I suspect this is not the culprit.

[johndoe46]

Some progress...

Emptying dynamicLibraries has no effect on the Promise resolve. However, using emrun does make the script work. So probably some HTTP wizardry I don't know about. Here are the index.html headers according to emrun and yarn serve:

Emrun headers:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Cache-Control: no-cache, must-revalidate
Connection: close
Content-Length: 592
Content-Type: text/html
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Resource-Policy: cross-origin
Date: Mon, 08 Jan 2024 19:45:40 GMT
Expires: -1
Last-Modified: Mon, 08 Jan 2024 19:41:57 GMT
Server: SimpleHTTP/0.6 Python/3.9.4

yarn serve headers:

HTTP/1.1 200 OK
Accept-Ranges: bytes
Connection: keep-alive
Content-Disposition: inline; filename="index.html"
Content-Length: 592
Content-Type: text/html; charset=utf-8
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
Date: Mon, 08 Jan 2024 19:47:37 GMT
ETag: "c9d75225cfb3a5de2e1418c2c859be01b0ad4fa4"
Keep-Alive: timeout=5
Vary: Accept-Encoding

So I changed the yarn serve config (serve.json) to add more headers and also to have all the CORS headers on the js and wasm files (because that's what emrun does):

{
  "headers": [
    {
      "source": "**/*.@(html|js|wasm,mjs)",
      "headers": [
        {
          "key": "Cross-Origin-Embedder-Policy",
          "value": "require-corp"
        },
        {
          "key": "Cross-Origin-Opener-Policy",
          "value": "same-origin"
        },
        {
          "key": "Cross-Origin-Resource-Policy",
          "value": "cross-origin"
        },
        {
          "key": "Access-Control-Allow-Origin",
          "value": "*"
        },
        {
          "key": "Cache-Control",
          "value": "no-cache, must-revalidate"
        }
      ]
    }
  ]
}

And bingo ! Now the Promise is fulfilled.

Thanks a lot for your help, time to play with vips now :)

[kleisauke]

Great! I could reproduce this when serving the COOP/COEP headers only on the main document. It appears that the worker script should also serve these headers.

Commit dcbbab14eac27b8a20c942b75496801617762154 clarifies this in the documentation. Thanks for reporting this!