I got an error when I was trying to use a library called pdf-dist. Actually, it works fine, but it’s kinda annoying cause it makes the website reloads every time I save any files even though I just changed some CSS classes (cause I’m using TailwindCSS btw).

I’m using the library in my [email protected] project.
The code I’m using now:

import EntryModal from "@/components/EntryModal";
import { type MouseEvent, useEffect, useState } from "react";
import { useDropzone } from "react-dropzone";
import { useNovelConfig } from "@/hooks/useNovelConfig";
import { FaPlus } from "react-icons/fa6";
import { saveRag } from "@/utils/NovelService";
import * as pdfjsLib from "pdfjs-dist";

pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.4.168/pdf.worker.min.mjs";

const FileUploader = () => {
  const [chosenFile, setChosenFile] = useState<any>();
  const { acceptedFiles, getInputProps, getRootProps } = useDropzone({
    accept: {
      "text/plain": [".txt"],
      "application/pdf": [".pdf"],
    },
    maxFiles: 1,
  });

  useEffect(() => {
    if (!chosenFile) return;
    const saveFile = async () => {
      await saveRag({
        rag_content: chosenFile.text || "",
      });
    };
    saveFile();
  }, [chosenFile]);

  useEffect(() => {
    if (!acceptedFiles || acceptedFiles.length === 0) return;
    const file = acceptedFiles[0];
    if (file.type === "text/plain") {
      const reader = new FileReader();
      reader.onabort = () => console.log("file reading was aborted");
      reader.onerror = () => console.log("file reading has failed");
      reader.onload = async () => {
        const text = reader.result as string;
        setChosenFile({ ...file, text });
      };
      reader.readAsText(file);
    } else if (file.type === "application/pdf") {
      const reader = new FileReader();
      reader.onload = async () => {
        const typedArray = new Uint8Array(reader.result as ArrayBuffer);
        const pdf = await pdfjsLib.getDocument({ data: typedArray })?.promise;
        const textArray: string[] = [];
        for (let i = 1; i <= pdf.numPages; i++) {
          const page = await pdf.getPage(i);
          const textContent = await page.getTextContent();
          const strings = textContent.items.map((item: any) => item.str);
          textArray.push(strings.join(" "));
        }
        setChosenFile({ ...file, text: textArray.join("n") });
      };
      reader.readAsArrayBuffer(file);
    }
  }, [acceptedFiles]);

  return (
    <div className="flex h-[20%] w-full flex-col gap-1">
      <p className="text-lg font-bold">
        File Upload <span className="text-base text-slate-500">| txt/pdf</span>
      </p>
      <section {...getRootProps()} className="flex h-full w-full items-center justify-center rounded-xl bg-base-300 hover:cursor-pointer">
        <input {...getInputProps()} />
        <div className="flex flex-col text-center">
          <h3 className="text-base">Drag or select your file</h3>
          <p className="text-xs font-bold text-slate-200">File: {chosenFile ? chosenFile.path : "None"}</p>
        </div>
      </section>
    </div>
  );
};

The error details:

 ⨯ TypeError: Promise.withResolvers is not a function
    at __webpack_require__ (D:projectswebbasedclient.nextserverwebpack-runtime.js:33:42)
    at eval (./components/LorebookContent.tsx:15:68)
    at (ssr)/./components/LorebookContent.tsx (D:projectswebbasedclient.nextserverappnovelspage.js:206:1)
    at __webpack_require__ (D:projectswebbasedclient.nextserverwebpack-runtime.js:33:42)
    at eval (./components/SidebarWrapper.tsx:11:85)
    at (ssr)/./components/SidebarWrapper.tsx (D:projectswebbasedclient.nextserverappnovelspage.js:250:1)
    at __webpack_require__ (D:projectswebbasedclient.nextserverwebpack-runtime.js:33:42)
    at eval (./components/Sidebar.tsx:17:84)
    at (ssr)/./components/Sidebar.tsx (D:projectswebbasedclient.nextserverappnovelspage.js:239:1)      
    at Object.__webpack_require__ [as require] (D:projectswebbasedclient.nextserverwebpack-runtime.js:33:42)
digest: "4044564068"

I’ve tried to update my NPM version (cause it’s mentioned in ChatGPT). I’ve also tried to fix it by creating a function which returns a promise. But yeah, it’s still the same.