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}
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" />
);
};
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:
filePathprop? I guess you can also passpdf.pdfin the prop directly, as it is in the public folder.