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,
  });
}