javascriptreactjspdfwebpacknext.js

Having trouble rendering a local PDF within a NextJS app

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.

Solution

  • 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.