AnnotationLayer links misaligned

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

The links contained in my pdf file are misaligned while using the react-pdf. I can see a bright yellow box and a cursor pointer indicating the link but it’s out of place (I tried showing it on a screenshot below)

Steps to reproduce

Create a NextJs project Copy the code below Attach a pdf file

Expected behavior

Annotations to be aligned with hyperlink text

Actual behavior

Annotations being misaligned

Additional information

My code is as follows:

import { Document, DocumentProps, Page, pdfjs } from "react-pdf";
import "react-pdf/dist/esm/Page/AnnotationLayer.css";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;

interface galleryProps {
  isOpen: boolean;
  handleClose: () => void;
}
const options = {
  cMapUrl: "cmaps/",
  cMapPacked: true,
  standardFontDataUrl: "standard_fonts/",
};
type LoadCallback = Required<DocumentProps>["onLoadSuccess"];

 const [numPages, setNumPages] = useState(0);
  const [pageNumber, setPageNumber] = useState(1);
  const onLoad: LoadCallback = useCallback((pdf) => {
    setNumPages(pdf.numPages);
  }, []);
  const handleNextPage = () => {
    pageNumber < 2
      ? setPageNumber(pageNumber + 1)
      : setPageNumber(pageNumber - 1);
  };
  const setDefaultPage = () => {
    setTimeout(() => setPageNumber(1), 500);
  };
  const handlers = useSwipeable({
    onSwipedDown: () => handleNextPage(),
    onSwipedUp: () => handleNextPage(),
  });
  return (
    <section
      className={`${styles.container} ${isOpen && styles.open}`}
      onWheel={handleNextPage}
      {...handlers}
    >
      <button
        className={styles["close-btn"]}
        aria-label="close-cv-gallery"
        onClick={() => {
          handleClose();
          setDefaultPage();
        }}
      >
        <CloseIcon fontSize="large" className={styles.icon} />
      </button>

      <Document
        file="/CV/mm-cv.pdf"
        onLoadSuccess={onLoad}
        externalLinkTarget="_blank"
        options={options}
        className={styles.document}
      >
        <Page
          pageNumber={pageNumber}
          renderAnnotationLayer={true}
          renderTextLayer={false}
        />
        <button
          onClick={handleNextPage}
          aria-label="cv-next-page"
          type="button"
          className={styles["next-btn"]}
        >
          <ArrowCircleDownOutlinedIcon
            fontSize="large"
            className={styles.icon}
          />
        </button>
      </Document>

      <p>
        Page {pageNumber} of {numPages}
      </p>
    </section>
  );
}

Environment

• Browser (if applicable): Brave v1.43 (Chromium 105)
• React-PDF version: 5.7.2
• React version: 18.2
• **NextJS 12.2

[Eivlys]

try to upgrade to version 6 but I got this building problem: #1043

manually import the css and set externalLinkTarget to _blank can also fix this in v5.7.2

import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
...

 <Page
     key={`page_${index + 1}`}
     pageNumber={index + 1}
     width={375}
     loading="Loading Page..."
     renderAnnotationLayer={true}
     renderTextLayer={false}
     externalLinkTarget="_blank"
 />

[wojtekmaj]

Check out 6.0.0 beta - rendering these layers were completely revamped in this version.