diegomura / diegomura/react-pdf

react-pdf isn't working in NextJS, getting "Module parse failed: Unexpected character '�'" error

Open
#2,716 0 comments 3 reactions 0 assignees View on GitHub
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 &&
Rendering PDF...
}

{!render.loading &&

You are not rendering a valid document
}


{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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.