CODEWITHSUNDEEP
reactjsnext.js
E Sargsyan
E Sargsyan

Reputation: 81

How to import PDF file with react-file-viewer in Next.js?

I want to use file-viewer in Next.js, but I get this error:

./public/pdf.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
> %PDF-1.3
| %����
|

How can I solve this problem?

my code:

import FileViewer from "react-file-viewer/src/components";
import pdf from "../../../public/pdf.pdf"

...(in component)

 {openFileViewer ? <FileViewer fileType="pdf" filePath={pdf}  /> : null}

Upvotes: 6

Views: 7123

Answers (2)

Jood80
Jood80

Reputation: 150

You still can import a .pdf file in Next.js without the need to a third party module, simply by using <iframe> HTML tag instead.

If you uploaded your file on a cloud storage; say google drive, dropbox, S3 ..etc you can embed its link in your website as such:

const PreviewFile = () => {
  return (
    <iframe
      src="https://drive.google.com/file/d/11h3WlhD221wMuXyXWPsdmXb4UNM-qaot/preview"
      title="Async & Performance"
      width="800"
      height="600"
    />
  )
}

*Note that a google drive link is used here but it's an embed link not the one you get when you click on share button. as attached below:

embed item preview enter image description here

Upvotes: 1

juliomalves
juliomalves

Reputation: 50308

Since your PDF file is located in the public folder, you can reference the image's path directly in the filePath prop.

You also need to make sure react-file-viewer is only imported in the browser as it depends on window being present to work properly. You can do so by dynamically importing the component through next/dynamic with ssr: false.

import dynamic from 'next/dynamic';

const FileViewer = dynamic(() => import('react-file-viewer'), {
    ssr: false
});

export default function Index() {
    return (
        <FileViewer fileType="pdf" filePath="/pdf.pdf" />
    );
};

Upvotes: 6

Related Questions