"IFDHandler is not defined" trying to import photos from Google Photos into a PDF generation app with NextJS

This is going to be a bit of a read but I would love to hear some thoughts. I have a project in NextJs that has a few dependencies, but it's mostly a simple form that stores the data to state and then sends that data to another component that generates a PDF (I'm using react-pdf to do this.). The company I'm working at work with Google Photos and I need to add pictures from google photos directly into the app. I have created all the inputs that are needed for this. Random jpegs from the internet work perfectly, any sort of png works perfectly, but for whatever reason, whenever I try to add a picture from google photos (which are all jpeg in my case), it simply doesn't work. I have many variations of the same function where I tried to get them to show up and it worked, all the pictures from google photos did show up in the PDF. (I attached pictures with everything below so you get a better understanding of the situation). The real knocker is the following, I need to open this file in MS Word because that's just how my company wants them and here's the thing: Even though the pictures show up in the PDF, whenever I try to edit the PDF with MS Word (I know this isn't something great, but it's a simple layout and MS Word reads it very well) they simply just don't show up. Random jpegs do, random pngs do, but jpegs downloaded from Google Photos albums simply don't.

I will attach some pictures below showing the whole thing in detail.

  // 21.03.2024 try (this doesn't show the google photos jpegs even on the pdf)

  function onFileSelect(e: any) {
    const files = e.target.files;
    if (files.length == 0) return;
    for (let i = 0; i < files.length; i++) {
      if (files[i].type.split("/")[0] !== "image") continue;
      if (!images.some((e: any) => e.name === files[i].name)) {
        const reader = new FileReader();
        reader.readAsDataURL(files[i]);
        reader.onload = () => {
          setImages((prevImages: any) => [
            ...prevImages,
            {
              type: files[i].type,
              name: files[i].name,
              url: URL.createObjectURL(files[i]), 
              // this can be reader.result for base64 string but i tried it and it's still the same result
            },
          ]);
        };
      }
    }
  }

  // current one im using (this does show any type of photo on the pdf, but whenever opened in ms word it doesnt show the ones from google photos im also using compressorjs here as a dependency) (i tried base64 conversion and everything)

  function onFileSelect(e: any) {
    const files = e.target.files;
    if (files.length == 0) return;
    for (let i = 0; i < files.length; i++) {
      if (files[i].type.split("/")[0] !== "image") continue;
      if (!images.some((e: any) => e.name === files[i].name)) {
        new Compressor(files[i], {
          quality: 0.8,
          convertTypes: ["image/jpeg"],
          success: (result: any) => {
            const reader = new FileReader();
            const mustBePng = new Blob([result], { type: "image/png" });
            reader.readAsDataURL(mustBePng);
            reader.onload = () => {
              setImages((prevImages: any) => [
                ...prevImages,
                {
                  type: result.type,
                  name: files[i].name,
                  url: reader.result,
                },
              ]);
            };
          },
        });
      }
    }
  }

And I have a few more, but there's just no point in showing them. The pictures I add from Google Photos give me and "IFDHandler is not defined." error in the console. I tried googling it but to no avail.

The red ones are the Google Photos ones that don't show up in MS Word and that give the IFDHandler error, The green and oranges are random jpegs and pngs that do work perfectly fine.

This is the image input, nothing special (ignore the png and jpgs tags, I added them so i know what format is what without checking the console.)

This is an example of a PDF result (with the function that doesn't show the google photos jpegs even in the pdf just so you understand what's happening. The first two images are random jpegs and all the other ones are the google photos jpegs. I can get them to show up in the pdf using the second function I showed, but they still wont work in MS Word)

This is the error I get when I try to import something from google photos.

I'd really appreciate some help. (I also tried to convert the files to png, but I couldn't get it to work, if you have any idea how to do that from the frontend, please let me know)

Thank you in advance!

This is my first post on stackoverflow, I hope it's ok.

Add this in package.json; it will be fixed:

"overrides": {
    "@react-pdf/image": "2.2.2"
  },