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

[FearlessSlug]

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<number | null>(null); const [currentPage, setCurrentPage] = useState(1); const [previousRenderValue, setPreviousRenderValue] = useState<string | null>( 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`