Having trouble rendering a local PDF within a NextJS app

user_7934389 0
Viewed 1913

I'm trying to show my resume (local file) within a react component but have been running into issues importing it.

import myResume from '../assets/pdfs/myResume.pdf' just gives me the error:

Cannot find module '../assets/pdfs/myResume.pdf' or its corresponding type declarations.ts(2307)

and if I try to use the import like this:

import myResume from '../assets/pdfs/myResume.pdf'

function Resume() {
  return (
    <div>
      <iframe src={myResume} />
    </div>
  )
}

export default Resume

It gives me a failed to compile error:

./assets/pdfs/myResume.pdf Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)

I've also tried using the React-pdf package, but with the same results.

webpack next.js reactjs pdf javascript
3 Answers

Actually figured out a workaround, not sure if this is the correct way, but I was able to get it to work by just putting the src right in the iframe.

So instead of

import myResume from '../assets/pdfs/myResume.pdf'

function Resume() {
  return (
    <div>
      <iframe src={myResume} />
    </div>
  )
}

I just did

function Resume() {
  return (
    <iframe src='/assets/pdfs/myResume.pdf' />
  )
}

which seems to work well.

user_79343890

Next js looks for the files in the public folder put your assets folder in the public folder then use like this: src = "/assets/pdfs/myResume.pdf". and don't include public folder in path because it automatically looks for it inside the public folder.

user_153539790

If you want to use react-pdf with Nextjs, one way to make it work is to pull pdf.worker.js from the CDN using:

import {pdfjs, Document, Page} from 'react-pdf'

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`

Then it seems to work fine with any URL to the PDF or file imported as you did. For example,

<Document file={myResume}>
    <Page pageIndex={0}/>
</Document>

Ref:
https://github.com/wojtekmaj/react-pdf/issues/136
https://www.npmjs.com/package/react-pdf

user_79679050
Related