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 (
    <div className="h-full w-full">
      {shouldShowTextLoader && <div>Rendering PDF...</div>}

      {!render.loading && <div>You are not rendering a valid document</div>}

      <div className="h-[80%] w-full">
        {shouldShowPreviousDocument && previousRenderValue ? (
          <Document
            key={previousRenderValue}
            className="previous-document"
            file={previousRenderValue}
            loading={null}
          >
            <Page key={currentPage} pageNumber={currentPage} />
          </Document>
        ) : null}
        <Document
          key={render.value}
          className={shouldShowPreviousDocument ? "rendering-document" : null}
          file={render.value}
          loading={null}
          onLoadSuccess={onDocumentLoad}
        >
          <Page
            key={currentPage}
            pageNumber={currentPage}
            onRenderSuccess={() => setPreviousRenderValue(render.value)}
          />
        </Document>
      </div>

      <PageNavigator
        currentPage={currentPage}
        numPages={numPages}
        onNextPage={onNextPage}
        onPreviousPage={onPreviousPage}
      />
    </div>
  );
};

export default PDFViewer;

4. load the page
5. See the error

You can make use of react-pdf REPL to share the snippet

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Brave
• React-pdf version: ^7.7.1