"ReferenceError: Blob is not defined" error when using with NextJS

[ezeikel]

Getting "ReferenceError: Blob is not defined" error when doing a build in NextJS. Works fine in development and my .heic image is converted on the client side like I want but when doing a build to deploy it to production I get this error.

Here is where I use it in my code:

  const onDrop = useCallback(async (files) => {
    setFiles(
      await Promise.all(
        files.map(async (file) => {
          let result;
          if (file.type === "image/heic") {
            setConvertingImage(true);
            result = await heic2any({
              blob: file,
              toType: "image/jpeg",
            });
            setConvertingImage(false);
          } else {
            result = file;
          }

          return Object.assign(file, {
            preview: URL.createObjectURL(result),
          });
        })
      )
    );
  }, []);

I'm thinking it may have to do with the fact that NextJS is Server Side Rendered and when heic2any is executed on the server something funny happens?

[gdstewart]

Got the exact same error, with the same conditions. Works great in development but then as soon as I try to make a build it returns the error.

[devdigitalrepublic]

@ezeikel @gdstewart If you use require it works fine!

const [img, setImg] = useState(null);

  useEffect(() => {
    const heic2any = require('heic2any')
    if (typeof window !== 'undefined') {
      fetch('https://alexcorvi.github.io/heic2any/demo/14.heic')
        .then((res) => res.blob())
        .then((blob) => heic2any({
          blob,
        }))
        .then((conversionResult) => {
          setImg(URL.createObjectURL(conversionResult));
        })
        .catch((e) => {
          console.log(e);
        });
    }
  }, []);

[ezeikel]

I did figure this out but can't remember exactly how. Hopefully @devdigitalrepublic's solution works for you @gdstewart otherwise I'll try and dig around and remember what I did.

[gdstewart]

@ezeikel @devdigitalrepublic Using require was the solution! Thanks a lot guys

[shamoons]

const heic2any = require('heic2any') not working for me

[honeykikiki]

I fixed the error thank you

[blakejoy]

How did you fix? @honeykikiki

[misbah-urrehman]

@blakejoy import the library inside the function.

[pranayrangne]

maybe it's too late and I guess most of you got the problem solved, but still would like to mention that to remove this error we need to write import inside the function or the place where we are using example, const onChange =(e)=>{ const heic2any = require('heic2any') \ like \ ...rest code

heic2any({   blob: heic,   toType: "image/jpeg",   quality: 0.1,   }).then((blob) => {   let heicFile = new File([blob], `${heic.name.split('.')[0]}.jpg`, {   type: "image/jpeg",   });   console.log(heicFile);   });

}