digest digest: "256245278"

[ltsmeShubham12]

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• I have checked if an issue is not listed in Known issues
• If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

While my pdf is in the production it is throwing me this error in the server again and again

⨯ TypeError: Promise.withResolvers is not a function
at webpack_require (C:\Users\Amogh\Desktop\Amogh-website\com.newamoghbuildtech.web.next\server\webpack-runtime.js:33:43)
at eval (./src/app/projects/[propertyId]/page.tsx:51:68)
at (ssr)/./src/app/projects/[propertyId]/page.tsx (C:\Users\Amogh\Desktop\Amogh-website\com.newamoghbuildtech.web.next\server\app\projects[propertyId]\page.js:467:1)
at Object.webpack_require [as require] (C:\Users\Amogh\Desktop\Amogh-website\com.newamoghbuildtech.web.next\server\webpack-runtime.js:33:43)
at JSON.parse ()
digest: "256245278"

Steps to reproduce

import { pdfjs } from "react-pdf";
import { GrMapLocation } from "react-icons/gr";
import { Spin } from "antd";
import { log } from "console";

const Document = dynamic(
() => import("react-pdf").then((mod) => mod.Document),
{ ssr: false } // Disable SSR
);

const Page = dynamic(
() => import("react-pdf").then((mod) => mod.Page),
{ ssr: false } // Disable SSR
);

Expected behavior

const [numPages, setNumPages] = useState(0);
const [pageNumber, setPageNumber] = useState(1);
const [containerWidth, setContainerWidth] = useState(0);
const [scale, setScale] = useState(1.0);
const [isFullScreen, setIsFullScreen] = useState(false);
const [flipDirection, setFlipDirection] = useState<"left" | "right" | null>(
null
);
const containerRef = useRef(null);
const audioRef = useRef<HTMLAudioElement | null>(null);
const [isAudioLoaded, setIsAudioLoaded] = useState(false);

useEffect(() => {
const audio = new Audio("/pageturn.mp3");
audio.addEventListener("canplaythrough", () => {
setIsAudioLoaded(true);
});
audioRef.current = audio;

return () => {
  audio.removeEventListener("canplaythrough", () => {
    setIsAudioLoaded(true);
  });
};

}, []);

useEffect(() => {
const updateWidth = () => {
if (containerRef.current) {
setContainerWidth(containerRef.current.offsetWidth - 2);
}
};

updateWidth();
window.addEventListener("resize", updateWidth);

return () => {
  window.removeEventListener("resize", updateWidth);
};

}, []);

const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
setNumPages(numPages);
};

const playPageFlipSound = () => {
if (isAudioLoaded && audioRef.current) {
audioRef.current.currentTime = 0;
audioRef.current
.play()
.catch((error) => console.error("Error playing audio:", error));
}
};

const changePage = (newPageNumber: number) => {
if (
newPageNumber !== pageNumber &&
newPageNumber >= 1 &&
newPageNumber <= numPages
) {
const direction = newPageNumber > pageNumber ? "right" : "left";
setFlipDirection(direction);
playPageFlipSound();
setTimeout(() => {
setPageNumber(newPageNumber);
}, 300);
setTimeout(() => {
setFlipDirection(null);
}, 500);
}
};

const goToPreviousPage = () => {
changePage(pageNumber - 1);
};

const goToNextPage = () => {
changePage(pageNumber + 1);
};

const handleZoom = (event: React.WheelEvent) => {
const delta = event.deltaY;
if (delta < 0) {
setScale((prevScale) => Math.min(prevScale + 0.1, 2.0));
} else {
setScale((prevScale) => Math.max(prevScale - 0.1, 0.5));
}
};

const zoomIn = () => {
setScale((prevScale) => Math.min(prevScale + 0.2, 2.0));
};

const zoomOut = () => {
setScale((prevScale) => Math.max(prevScale - 0.2, 0.5));
};

const toggleFullScreen = () => {
if (containerRef.current) {
if (!document.fullscreenElement) {
containerRef.current.requestFullscreen();
} else {
document.exitFullscreen();
}
setIsFullScreen(!document.fullscreenElement);
}
};

useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "ArrowLeft") {
goToPreviousPage();
} else if (event.key === "ArrowRight") {
goToNextPage();
}
};

window.addEventListener("keydown", handleKeyDown);

return () => {
  window.removeEventListener("keydown", handleKeyDown);
};

}, [pageNumber, numPages]);

const handleLoadError = (error: Error) => {
console.error("Failed to load PDF:", error.message);
};

pdfjs.GlobalWorkerOptions.workerSrc = //unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs;

const ThumbnailIcon: React.FC = ({
numPages,
pdfPath,
setPageNumber,
}) => {
const [showThumbnails, setShowThumbnails] = useState(false);

return (
  <div className="">
    <FileImageOutlined
      className="text-2xl cursor-pointer"
      onClick={() => setShowThumbnails(true)}
    />
    {showThumbnails && (
      <div className="thumbnail-box  mb-4 border-red-400 border-[4px]">
        <div className=" flex justify-between border-b w-full items-center p-2 sticky top-[-2px] bg-white z-10">
          <p className="text-xs relative right-6 font-bold">Thumbnails</p>
          <ImCross
            className="text-sm cursor-pointer"
            onClick={() => setShowThumbnails(false)}
          />
        </div>
        <div className="thumbnail-grid border grid grid-cols-2 gap-2 p-2 max-h-60 overflow-y-auto">
          {Array.from(new Array(numPages), (_, index) => (
            <div
              key={`thumb_${index + 1}`}
              className="thumbnail-item border border-gray-300"
              onClick={() => {
                setPageNumber(index + 1);
                setShowThumbnails(false);
              }}
            >
              <Document file={pdfPath}>
                <Page
                  pageNumber={index + 1}
                  width={80}
                  renderMode="canvas"
                  renderTextLayer={false}
                  renderAnnotationLayer={false}
                />
              </Document>
            </div>
          ))}
        </div>
      </div>
    )}
  </div>
);

};

Actual behavior

const [numPages, setNumPages] = useState(0);
const [pageNumber, setPageNumber] = useState(1);
const [containerWidth, setContainerWidth] = useState(0);
const [scale, setScale] = useState(1.0);
const [isFullScreen, setIsFullScreen] = useState(false);
const [flipDirection, setFlipDirection] = useState<"left" | "right" | null>(
null
);
const containerRef = useRef(null);
const audioRef = useRef<HTMLAudioElement | null>(null);
const [isAudioLoaded, setIsAudioLoaded] = useState(false);

useEffect(() => {
const audio = new Audio("/pageturn.mp3");
audio.addEventListener("canplaythrough", () => {
setIsAudioLoaded(true);
});
audioRef.current = audio;

return () => {
  audio.removeEventListener("canplaythrough", () => {
    setIsAudioLoaded(true);
  });
};

}, []);

useEffect(() => {
const updateWidth = () => {
if (containerRef.current) {
setContainerWidth(containerRef.current.offsetWidth - 2);
}
};

updateWidth();
window.addEventListener("resize", updateWidth);

return () => {
  window.removeEventListener("resize", updateWidth);
};

}, []);

const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
setNumPages(numPages);
};

const playPageFlipSound = () => {
if (isAudioLoaded && audioRef.current) {
audioRef.current.currentTime = 0;
audioRef.current
.play()
.catch((error) => console.error("Error playing audio:", error));
}
};

const changePage = (newPageNumber: number) => {
if (
newPageNumber !== pageNumber &&
newPageNumber >= 1 &&
newPageNumber <= numPages
) {
const direction = newPageNumber > pageNumber ? "right" : "left";
setFlipDirection(direction);
playPageFlipSound();
setTimeout(() => {
setPageNumber(newPageNumber);
}, 300);
setTimeout(() => {
setFlipDirection(null);
}, 500);
}
};

const goToPreviousPage = () => {
changePage(pageNumber - 1);
};

const goToNextPage = () => {
changePage(pageNumber + 1);
};

const handleZoom = (event: React.WheelEvent) => {
const delta = event.deltaY;
if (delta < 0) {
setScale((prevScale) => Math.min(prevScale + 0.1, 2.0));
} else {
setScale((prevScale) => Math.max(prevScale - 0.1, 0.5));
}
};

const zoomIn = () => {
setScale((prevScale) => Math.min(prevScale + 0.2, 2.0));
};

const zoomOut = () => {
setScale((prevScale) => Math.max(prevScale - 0.2, 0.5));
};

const toggleFullScreen = () => {
if (containerRef.current) {
if (!document.fullscreenElement) {
containerRef.current.requestFullscreen();
} else {
document.exitFullscreen();
}
setIsFullScreen(!document.fullscreenElement);
}
};

useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "ArrowLeft") {
goToPreviousPage();
} else if (event.key === "ArrowRight") {
goToNextPage();
}
};

window.addEventListener("keydown", handleKeyDown);

return () => {
  window.removeEventListener("keydown", handleKeyDown);
};

}, [pageNumber, numPages]);

const handleLoadError = (error: Error) => {
console.error("Failed to load PDF:", error.message);
};

pdfjs.GlobalWorkerOptions.workerSrc = //unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs;

const ThumbnailIcon: React.FC = ({
numPages,
pdfPath,
setPageNumber,
}) => {
const [showThumbnails, setShowThumbnails] = useState(false);

return (
  <div className="">
    <FileImageOutlined
      className="text-2xl cursor-pointer"
      onClick={() => setShowThumbnails(true)}
    />
    {showThumbnails && (
      <div className="thumbnail-box  mb-4 border-red-400 border-[4px]">
        <div className=" flex justify-between border-b w-full items-center p-2 sticky top-[-2px] bg-white z-10">
          <p className="text-xs relative right-6 font-bold">Thumbnails</p>
          <ImCross
            className="text-sm cursor-pointer"
            onClick={() => setShowThumbnails(false)}
          />
        </div>
        <div className="thumbnail-grid border grid grid-cols-2 gap-2 p-2 max-h-60 overflow-y-auto">
          {Array.from(new Array(numPages), (_, index) => (
            <div
              key={`thumb_${index + 1}`}
              className="thumbnail-item border border-gray-300"
              onClick={() => {
                setPageNumber(index + 1);
                setShowThumbnails(false);
              }}
            >
              <Document file={pdfPath}>
                <Page
                  pageNumber={index + 1}
                  width={80}
                  renderMode="canvas"
                  renderTextLayer={false}
                  renderAnnotationLayer={false}
                />
              </Document>
            </div>
          ))}
        </div>
      </div>
    )}
  </div>
);

};

Additional information

{data?.name}

{pageNumber > 1 && ( )}

{pageNumber} {numPages}

showModal(data)} className="ml-1" /> showModal(data)} type="submit" className="border md:absolute right-0 border-[#FF5C29] md:ml-2 px-2 py-2 bg-[#FF5C29] rounded text-xs text-white hover:bg-[#FF5C29] transition-all duration-300 cursor-pointer mt-2 md:mt-0" > Download

Environment

• Browser (if applicable):
• React-PDF version:
• React version:
• Bundler name and version (if applicable):

[wojtekmaj]

Duplicate of #1811