Links are not rendered

[volosovich]

Before you start - checklist

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

Description

I'm using react-pdf in my project on next.js 14 and my pdf file contains a list of links that are not rendered as links. 222.pdf A file with an example is attached to this description. There is no problem with links in a PDF file if I open it directly in the browser or any specific PDF reader tool

Steps to reproduce

1. use your sample next-app in the repo
2. change sample.pdf from your example to the provided file
3. Try to click links

Expected behavior

Links should be links and should be opened in the browser.

Actual behavior

Links are not clickable.

Additional information

No response

Environment

• Browser (if applicable): Chrome 127 (Apple MBP M2 chip)
• React-PDF version: latest (and the same problem on old v6)
• React version: 18.2.0
• Bundler name and version (if applicable): next.js 14

[EthanDavis]

I'm also having this issue.

[Nagavijay-beachbody]

@volosovich @EthanDavis , Did you find any alternative solution for this.? if yes, Kindly help me.

[rgarfield11]

I'm also experiencing this issue.

• I loaded my document into the PDF.js demo and found that the link was rendered as a <span>, where I believe it should be rendered as an <a href="...">

• Locally, I've imported the AnnotationLayer styles with

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

• I've used the props specified here to check via the console if the annotation layer is being rendered

  <Document file={pdfFile} options={pdfReaderOptions}>
  <Page
  devicePixelRatio={devicePixelRatio}
  height={paneStyle.height}
  onGetAnnotationsError={(error) => console.log("error: ", error)}
  onRenderAnnotationLayerError={(error) => console.log("error: ", error)}
  onRenderAnnotationLayerSuccess={(success) => console.log("success: ", success)}
  pageNumber={documentControl.currentPage}
  renderAnnotationLayer={true}
  renderTextLayer={true}
  />
  </Document>

  and it is

@wojtekmaj - please let me know if you'd like more context, is this an issue you are working to resolve?

[BarbaraPruz]

We are also having this problem and on inspection, see the empty <a> element. We've imported the annotation layer styles css. We are using react-pdf 8.0.2 with react 18.2.0.. I also tried with latest react-pdf 9.1.1