Node error Importing a react-pdf component into page using new nextjs app directory

[abduljamac]

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

My project is using the new app directory for next-js, I created component which contains react-pdf code, that looks like this:

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

export default function PDFViewer({ file }) {
	useEffect(() => {
		pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`
	}, [])

	const [numPages, setNumPages] = useState(null)
	const [searchText, setSearchText] = useState("")

	// const file = "assets/record.pdf"

	function highlightPattern(text, pattern) {
		return text.str.replace(pattern, (value) => `<mark>${value}</mark>`)
	}

	function onDocumentLoadSuccess({ numPages }) {
		setNumPages(numPages)
	}

	function onItemClick({ pageNumber: itemPageNumber }) {
		setPageNumber(itemPageNumber)
	}

	const textRenderer = (textItem) => {
		if (!textItem) return null
		return highlightPattern(textItem, searchText)
	}

	function onChange(event) {
		setSearchText(event.target.value)
	}
	return (
		<>
			<div>
				<label htmlFor="search">Search:</label>
				<input type="search" id="search" value={searchText} onChange={onChange} />
			</div>
			<Document file={file} onLoadSuccess={onDocumentLoadSuccess}>
				<Outline onItemClick={onItemClick} />
				{Array.from(new Array(numPages), (_, index) => (
					<Page
						size="A4"
						key={`page_${index + 1}`}
						pageNumber={index + 1}
						customTextRenderer={textRenderer}
					/>
				))}
			</Document>
		</>
	)
}

and when I import it into page.tsx, I get the error below:

However it works fine in non app directory project, so I assume its problem with next-js app directory not being compatible with react-pdf. I was wondering if anyone experienced this problem and if they have a work around?

Steps to reproduce

N/A

Expected behavior

To not show the error?

Actual behavior

N/A

Additional information

No response

Environment

• Browser (if applicable):
• React-PDF version^7.0.3:
• React version^18.2.0:
• Webpack version (if applicable):

[MattL75]

Check #1508 maybe the fix in there will help you?

[icaro-rdp]

i'm in the same situation with a brand new nextJS app route project.

[icaro-rdp]

@abduljamac #1508 (comment) this worked for me!

[abduljamac]

@abduljamac #1508 (comment) this worked for me!

Did it work without using DynamicOptions from next?

@icaro-rdp

[icaro-rdp]

@abduljamac #1508 (comment) this worked for me!

Did it work without using DynamicOptions from next?

@icaro-rdp

I've used it so as to avoid ssr, dunno if it works without it

[emiller7]

ok - so following the docs (latest) using react 18 I have to use the CDN url for

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

when using react-pdf I get the following error .6.172" does not match the Worker version "3.8.162"

Using the CDN URL worked so I assume you could download the latest worker and reference that instead of using the CDN

[wojtekmaj]

@emiller7 The error you're getting suggests to me that you have installed pdfjs-dist separately and in fact you have two copies of pdfjs-dist installed in your repository. I'd suggest you fix that.

[emiller7]

@wojtekmaj yes your correct - for some reason pdfjs-dist keeps appearing in my node_modules folder even though I did not npm install it or include it in my package.json - trying to figure out how to remove it

[emiller7]

@wojtekmaj actually when doing npm install react-pdf it also installs pdfjs-dist folder into my node_modules folder with version 3.6.172. The version in the react-pdf folder in node_modules uses a newer version 3.8.162. It seems like the dependency on pdfjs-dist when installing react-pdf is using the older version. Thus doing npm install pdfjs-dist will update to the latest version 3.8.162

I did a succesful npm uninstall pdfjs-dist and then did a npm install pdfjs-dist@3.6.172 and it worked

[wojtekmaj]

Since the original issue has been resolved and the solution has been properly documented in README, I'm closing this.