kleisauke / wasm-vips

libvips for the browser and Node.js, compiled to WebAssembly with Emscripten.
https://kleisauke.github.io/wasm-vips/
MIT License
463 stars 25 forks source link

DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL #35

Closed CoenraadS closed 1 year ago

CoenraadS commented 1 year ago

Hi, I'm really excited to try this project, but couldn't seem to get it running locally (Firefox & Chrome)

This was my minimum attempt:

<!DOCTYPE html>
<html>

<head>
    <title>wasm-vips</title>
</head>

<body>
</body>

<script src="./vips.js"></script>
<script type="module">
    const vips = await Vips();
</script>

</html>

Folder structure:

libvips
 ┣ index.html
 ┣ vips-jxl.wasm
 ┣ vips.js
 ┣ vips.wasm
 ┗ vips.worker.js

Console output:

Uncaught (in promise) DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
    at oa (http://127.0.0.1:5555/vips.js:12:500)
    at http://127.0.0.1:5555/vips.js:116:217
    at new Promise (<anonymous>)
    at e (http://127.0.0.1:5555/vips.js:116:191)
    at f (http://127.0.0.1:5555/vips.js:116:467)
    at fd (http://127.0.0.1:5555/vips.js:117:361)
    at http://127.0.0.1:5555/vips.js:118:327

worker sent an error! http://127.0.0.1:5555/vips.worker.js:1: Uncaught SyntaxError: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
Lb.a.onerror @ vips.js:101

project.zip

kleisauke commented 1 year ago

I could reproduce this, it looks like commit 0d776ceb41b089289b11047b6eb6b64e225e4ad3 causes somehow a conflict with the dynamic vips-jxl.wasm module introduced in commit 995eba0242b674332107dc91087371aaec9916f.

You can workaround this by overriding the locateFile callback.

@@ -10,7 +10,9 @@

 <script src="./vips.js"></script>
 <script type="module">
-  const vips = await Vips();
+  const vips = await Vips({
+    locateFile: (fileName, scriptDirectory) => scriptDirectory + fileName
+  });
 </script>

 </html>

Or by disabling support for dynamic modules (which implies that support for JPEG XL images is also disabled).

@@ -10,7 +10,9 @@

 <script src="./vips.js"></script>
 <script type="module">
-  const vips = await Vips();
+  const vips = await Vips({
+    dynamicLibraries: []
+  });
 </script>

 </html>

I'll investigate why this is necessary.

kleisauke commented 1 year ago

Fixed with commit 5a21668ffaa48e6ea0b3756b5c4b2934f57f568d. This will be in v0.0.5.

kleisauke commented 1 year ago

v0.0.5 now available.