libheif-js icon indicating copy to clipboard operation
libheif-js copied to clipboard

Not working with Vite

Open Armster15 opened this issue 2 years ago • 7 comments

Hello,

I am using heic-decode, which underneath seems to be using libheif-js. I am currently using Vite.js for my project. However, upon importing the library, this error pops up in the console, preventing me from using the library:

The message on Firefox:

Uncaught TypeError: "stack" is read-only
    ensureErrnoError libheif.js:4153
    ensureErrnoError libheif.js:4151
    staticInit libheif.js:4157
    js libheif.js:7160
    js libheif.js:124105
    __require2 heic-decode.js:10
    js index.js:1
    __require2 heic-decode.js:10
    <anonymous> heic-decode:1

The message on Chrome:

Uncaught TypeError: Cannot assign to read only property 'stack' of object 'Error: No such file or directory'
    at libheif.js:4153:32
    at Array.forEach (<anonymous>)
    at Object.ensureErrnoError (libheif.js:4151:28)
    at Object.staticInit (libheif.js:4157:10)
    at Object.<anonymous> (libheif.js:7160:6)
    at node_modules/libheif-js/libheif/libheif.js (libheif.js:124105:3)
    at __require2 (heic-decode.js?v=6d7735c8:10:50)
    at node_modules/heic-decode/index.js (index.js:1:17)
    at __require2 (heic-decode.js?v=6d7735c8:10:50)
    at dep:heic-decode:1:16

Turning off minification, I was able to narrow down the error to this line in the built libheif-js file:

FS.genericErrors[code].stack = "<generic error, no stack>";

However, I am not sure how to fix this. I have been stuck on this issue for a while, so I would appreciate it if someone could take a look!

A reproducible repo with a very simple Vite project is available at https://github.com/Armster15/heic-decode-vite

Thank you for your time.

Armster15 avatar Aug 03 '22 07:08 Armster15

Using heic-convert (https://github.com/catdad-experiments/heic-convert) in node.js on a mac m1 or mac intel gives this error:

TypeError: Cannot assign to read only property 'stack' of object 'Error: No such file or directory'
    at ... /node_modules/libheif-js/libheif/libheif.js:1:161615
    at Array.forEach (<anonymous>)
    at Object.ensureErrnoError (... /node_modules/libheif-js/libheif/libheif.js:1:161521)
    at Object.staticInit (... /node_modules/libheif-js/libheif/libheif.js:1:161680)
    at Object.<anonymous> (... /node_modules/libheif-js/libheif/libheif.js:1:225445)
    at node_modules/libheif-js/libheif/libheif.js (... /node_modules/libheif-js/libheif/libheif.js:18:12382)
   ...

This occurs at the point of importing heic-convert, which loads libheif-js

const convert = require('heic-convert')

robblovell avatar Oct 22 '22 21:10 robblovell

Using heic-convert (https://github.com/catdad-experiments/heic-convert) in node.js on a mac m1 or mac intel gives this error:

TypeError: Cannot assign to read only property 'stack' of object 'Error: No such file or directory' at ... /node_modules/libheif-js/libheif/libheif.js:1:161615 at Array.forEach () at Object.ensureErrnoError (... /node_modules/libheif-js/libheif/libheif.js:1:161521) at Object.staticInit (... /node_modules/libheif-js/libheif/libheif.js:1:161680) at Object. (... /node_modules/libheif-js/libheif/libheif.js:1:225445) at node_modules/libheif-js/libheif/libheif.js (... /node_modules/libheif-js/libheif/libheif.js:18:12382) ... ,

the package libheif.js vision maybe old, need upadte new vision. I fixed this bug https://github.com/lee-won/heic-convert-plus

lee-won avatar Jun 29 '23 04:06 lee-won

Hi @lee-won, could you please share more details on how you managed to fix this bug?

fpdrozd avatar Jul 26 '23 10:07 fpdrozd

I have solved this issue by forking libheif-emscripten.

  1. Change the submodule libheif to a newer version with https://github.com/strukturag/libheif.git
  2. In .github/workflows/emscripten.yml change to: EMSCRIPTEN_VERSION: 3.1.47 (for libheif v1.17.1)
  3. Commit so that the workflow outputs an artifact libheif-dst, this contains a file libheif.js
  4. Overwrite the content of libheif.js in node_modules/libheif-js using patch-package

I hope this helps someone

@catdad could you look into upgrading this library to work with libheif v1.17.1? Thanks in advance!

merijnhofsteenge avatar Nov 02 '23 17:11 merijnhofsteenge

I've been looking at these changes as they are made to libheif itself. It looks like [email protected] is no longer API-compatible with [email protected] (the latest I have released). This change probably (total guess) happened when they converted the js module to use webassembly (at least I heard that happened, I have not verified anything). This is a positive change and all, but it will definitely be a complicated release for libheif-js... where node developers expect that huge breaking changes won't happen in minor version releases. I'll have to think a bit more about how to actually release this new version.

catdad avatar Nov 02 '23 18:11 catdad

@merijnhofsteenge sorry this took a minute. Since the upstream libheif had a wasm version available, I took the time to make that available in libheif-js as well so everyone could get those benefits out of the box, and that added some complications.

The latest [email protected] is now built with emscripten 3.1.47 and uses the updated javascript wrapper, and it's available to install in npm. I have not tried to verify that it fixed the vite issue yet... I might do that later if one of y'all doesn't beat me to it.

catdad avatar Nov 08 '23 17:11 catdad

Using Next.js this works! Thanks a bunch @catdad 😊

I am using heic-decode, everything works well

merijnhofsteenge avatar Nov 08 '23 17:11 merijnhofsteenge