Spread syntax requires ...iterable[Symbol.iterator] to be a function

[danieltan007]

hello
im trying to add heic file in my next js 14 app with formData on my windows machine using this code

const data = await req.formData();
const kk = data.get("kk") as File;
const kk_buffer = kk && kk instanceof Blob ? await kk.arrayBuffer() : undefined;
if (kk.name.split(".")[1] === "heic" || kk.name.split(".")[1] === "heif") {
	const kk_converted = await convert({
	  buffer: kk_buffer,
	  format: "JPEG",
	});
  console.log("🚀 ~ kk_converted:", kk_converted)
}

and i got error like this: Spread syntax requires ...iterable[Symbol.iterator] to be a function

is this because im upload from my windows machine?

[nicobret]

Hi
Same error here, on macOs.

My code:

export async function convertImage(file, format = "PNG") {
  const blob = new Blob([file], { type: "image/heif" });
  const buffer = await blob.arrayBuffer();
  const outputBuffer = await convert({ buffer, format });
  const blob2 = new Blob([outputBuffer], { type: `image/${format.toLowerCase()}` });
  const image = new File([blob2], `${file.name}.${format.toLowerCase()}`, { type: blob.type });
  return image;
}

The error:

heic-convert_browser.js?v=9e2a22c5:2552 Uncaught (in promise) TypeError: Spread syntax requires ...iterable[Symbol.iterator] to be a function
    at uint8ArrayUtf8ByteString (heic-convert_browser.js?v=9e2a22c5:2552:21)
    at isHeic (heic-convert_browser.js?v=9e2a22c5:2555:26)
    at decodeBuffer (heic-convert_browser.js?v=9e2a22c5:2585:14)
    at one (heic-convert_browser.js?v=9e2a22c5:2606:42)
    at convert (heic-convert_browser.js?v=9e2a22c5:2671:31)
    at one (heic-convert_browser.js?v=9e2a22c5:2686:66)
    at convertImage (file.service.js?t=1707385570317:35:30)
    at async handleChange (FileImport.jsx:13:15)

[catdad]

Thanks for providing your code.

I did not verify this, but this is probably my fault for not documenting the types. The buffer argument is supposed to be a Uint8Array and not an ArrayBuffer (it's also weird that something called an ArrayBuffer would not be iterable, but that's not the point), since node buffers are really just fancy Uint8Arrays. I believe you can just do const buffer = new Uint8Array(await blob.arrayBuffer()) to convert that.

[njfamirm]

any update?

[njfamirm]

I have a same issue and this can't fix issue

resizeImage(file: Blob) {
  const buffer = new Uint8Array(await file.arrayBuffer())
  const optimizedImage = await heicConvert({
    buffer,
    format: 'JPEG',
    quality: 80,
  });
}

[skeptrunedev]

It would be nice to fix the types here so the ts compiler doesn't throw an error that forces you to do:

const convertedFile = await convert({
    buffer: new Uint8Array(
        buffer,
     ) as unknown as ArrayBuffer,
     format: "PNG",
});

[rattkin]

It would be nice to fix the types here so the ts compiler doesn't throw an error that forces you to do:

const convertedFile = await convert({
buffer: new Uint8Array(
buffer,
) as unknown as ArrayBuffer,
format: "PNG",
});

it works with typescript 5.9 now, thank you!
There were some type changes, but the original example doesn't work on 5.8 or 5.9

[theandychase]

I just ran into this and will try to submit a PR to fix the ConversionOptions type, but in the meantime if anyone else runs into this, you can override the type in your own code by adding this at the top of the file where you're using heic-convert:

declare module 'heic-convert/browser' {
  interface ConversionOptions {
    buffer: Uint8Array;
    format: 'JPEG' | 'PNG';
  }
}```