URIError: URI malformed at decodeURIComponent and missing TextLayer.css

[mynameisankit]

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

Tech Stack: Next.js

Hi Team, I am not able to import the CSS files AnnotationLayer.css and TextLayer.css. I think that the AnnotationLayer.css import error is related to Next.js but I don't understand why TextLayer.css is missing.

Link to Relevant Files and Repository -

• https://github.com/mynameisankit/portfolio-v2
• https://github.com/mynameisankit/portfolio-v2/tree/main/components/common/PdfViewer

Steps to reproduce

1. Do the following imports:-
   • import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
   • import 'react-pdf/dist/esm/Page/TextLayer.css';

Only if the project is cloned:- 2. Uncomment the import lines for the CSS files in components/common/PdfViewer/pdf-viewer.jsx 4. Goto localhost:3000/resume

Expected behavior

I should be able to import the CSS files normally

Actual behavior

I am not able to import the CSS files as shown in the screenshots below.

Additional information

1. When I add AnnotationLayer.css import

2. When I add TextLayer.css import

3. After removing the import for the CSS files and adding the following props, everything renders properly.

Environment

• Browser (if applicable): Chrome Version 103.0.5060.66
• React-PDF version: ^5.7.2
• React version: 17.0.2
• Webpack version (if applicable): 5
• Next.js version: 12.0.4