diegomura / diegomura/react-pdf
react-pdf isn't working in NextJS, getting "Module parse failed: Unexpected character '�'" error
- Dominant language
- TypeScript
- Stars
- 16.8k
- Forks
- 1.3k
- Avg merge
- 5h 6m
- Merged PRs (30d)
- 52
Description
**Describe the bug**
I try to use this package in the exact same way as the repl site, more specifically like this component:
https://github.com/diegomura/react-pdf-site/blob/master/src/components/Repl/PDFViewer.js
I use latest NextJS app router and I'm getting this error:
```
./node_modules/canvas/build/Release/canvas.node
Module parse failed: Unexpected character '�' (1:2)
```
**To Reproduce**
Steps to reproduce the behavior including code snippet (if applies):
1. Create new next app
2. implement this component in your code: https://github.com/diegomura/react-pdf-site/blob/master/src/components/Repl/PDFViewer.js
This is how I implemented it:
```
"use client";
import React, { useState } from "react";
import { Document, Page } from "react-pdf";
import PageNavigator from "./PageNavigator";
const PDFViewer = ({
loading,
error,
url,
}: {
loading: boolean;
error: string | null;
url: string | null;
}) => {
const [numPages, setNumPages] = useState(null);
const [currentPage, setCurrentPage] = useState(1);
const [previousRenderValue, setPreviousRenderValue] = useState(
null,
);
const render = {
loading,
value: url,
error,
};
const onPreviousPage = () => {
setCurrentPage((prev) => prev - 1);
};
const onNextPage = () => {
setCurrentPage((prev) => prev + 1);
};
const onDocumentLoad = (d) => {
setNumPages(d.numPages);
setCurrentPage((prev) => Math.min(prev, d.numPages));
};
const isFirstRendering = !previousRenderValue;
const isLatestValueRendered = previousRenderValue === render.value;
const isBusy = render.loading || !isLatestValueRendered;
const shouldShowTextLoader = isFirstRendering && isBusy;
const shouldShowPreviousDocument = !isFirstRendering && isBusy;
return (
{shouldShowTextLoader &&
{!render.loading &&
{shouldShowPreviousDocument && previousRenderValue ? (
) : null}
setPreviousRenderValue(render.value)}
/>
);
};
export default PDFViewer;
```
4. load the page
5. See the error
_You can make use of [react-pdf REPL](https://react-pdf.org/repl) to share the snippet_
**Desktop (please complete the following information):**
- OS: Windows 10
- Browser: Brave
- React-pdf version: `^7.7.1`
Contributor guide
Assessment
This issue has not been assessed yet.