Image.initLib() failing with ERR_INVALID_URL

[jordan-loeser]

Hello! I am trying to convert an animated canvas into an animated webp file. When I try to initialize the library in order to use img.setImageData(), I get the following error:

TypeError: Failed to parse URL from /Users/jordan/Documents/Coding/LED Matrix Display/pixel-app/node_modules/node-webpmux/libwebp/libwebp.wasm
    at Object.fetch (node:internal/deps/undici/undici:11457:11)
    at processTicksAndRejections (node:internal/process/task_queues:95:5) {
  [cause]: TypeError [ERR_INVALID_URL]: Invalid URL
      at new NodeError (node:internal/errors:399:5)
      at new URL (node:internal/url:560:13)
      at new Request (node:internal/deps/undici/undici:7041:25)
      at fetch2 (node:internal/deps/undici/undici:10598:25)
      at Object.fetch (node:internal/deps/undici/undici:11455:18)
      at fetch (node:internal/process/pre_execution:230:25)
      at instantiateAsync (/Users/jordan/Documents/Coding/LED Matrix Display/pixel-app/node_modules/node-webpmux/libwebp/libwebp.js:9:13307)
      at createWasm (/Users/jordan/Documents/Coding/LED Matrix Display/pixel-app/node_modules/node-webpmux/libwebp/libwebp.js:9:13917)
      at /Users/jordan/Documents/Coding/LED Matrix Display/pixel-app/node_modules/node-webpmux/libwebp/libwebp.js:9:50334
      at libWebP.init (/Users/jordan/Documents/Coding/LED Matrix Display/pixel-app/node_modules/node-webpmux/libwebp.js:52:38) {
    input: '/Users/jordan/Documents/Coding/LED Matrix Display/pixel-app/node_modules/node-webpmux/libwebp/libwebp.wasm',
    code: 'ERR_INVALID_URL'
  }
}

As far as I can see, the path listed correctly points to the installed file in node_modules. For context, this is the pattern I am using:

// In a class with this.canvas and this.ctx defined...
 async saveAsWebP() {
    // Generate a frame from the canvas
    const canvasImageData = this.ctx.getImageData(
      0,
      0,
      this.canvas.width,
      this.canvas.height
    );

    // Set the image's pixel data
    const img = await WebP.Image.getEmptyImage();

    await WebP.Image.initLib();

    await img.setImageData(canvasImageData, {
      width: img.width,
      height: img.height,
    });
}

For context, I am using the following on a Mac running Apple Silicon.

• node-webpmux: ^3.1.7
• Typescript ^5.1.6
• Node v18.16.1

Has anyone encountered this before?

[ApeironTsuka]

That... makes so little sense. It sounds like either a bug in NodeJS's WebAssembly loader or a weird incompatibility between the version of Emscripten I used and NodeJS v18. Or maybe Typescript causing some strange issue. Can you test await WebP.Image.initLib() without Typescript active? I have no experience with TS.

Edit - Can confirm it doesn't work in NodeJS v18.17.0 for ... some reason. Testing further.

[ApeironTsuka]

Can confirm it was indeed an issue with Emscripten and Node v18+. Pushed a fix here and to NPM. node-webpmux 3.1.8 should work.

[jordan-loeser]

This fix worked! Thanks so much for the quick resolution! (noting for myself this was fixed in b438517c9042a11e6870a4cba4c554f413aee64f)