ReferenceError: Cant find variable: globalThis on Iphone safari browser (REACT JS)

[Francis2022]

Hi This is my very first post in Github and just signed up to post my issue with browser-image-compression.

My site built using react and browser-image-compression work fine on my laptop and desktop browsers. But sadly when i try it on my iphone safari browser it throws me below error. ReferenceError: Cant find variable: globalThis

I have changed console.log to alert so i can see whats going on in my iphone browser. I get errors during try catch. I am not sure what i am doing wrong. So sorry if i am disturbing. browser-image-compression is the best i found.

    const target = event.target
    const imageFile = target.files[0];
    alert('originalFile instanceof Blob', imageFile instanceof Blob); // true
    alert(`originalFile size ${imageFile.size / 1024 / 1024} MB`);

      const options = {
      maxSizeMB: 1,
      maxWidthOrHeight: 1920,
      useWebWorker: false,
    }

    // upto here it works very well and i get first two alerts but catch errors after below try 

      try {
      const compressedFile = await imageCompression(imageFile, options);
      alert('compressedFile instanceof Blob', compressedFile instanceof Blob); // true
      alert(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB

      setFieldValue(name, compressedFile);
      // let reader = new FileReader();
      // reader.readAsDataURL(field)
      let reader = URL.createObjectURL(compressedFile)
      setFileUrl(reader)

      // await uploadToServer(compressedFile); // write your own logic
    } catch (error) {
      alert(error);
    }

  }`

[Francis2022]

Hi I solved this problem by inserting below script to index.html i am not sure is it good practice to load this but i can not give up browser-image-compression as its uploading images very fast and the image compression is excellent.

<script src="//unpkg.com/@ungap/global-this"></script>