Working with the PDF Viewer in NextJS 13 and App folders: Module not found "canvas"

[mtreilly]

Comment: Not sure where to post this, but thought it might be helpful to others

Issue:

When using the PDF viewer inside a page of the new app folder layout, regardless if you use "use client" at the top of the document, the file will still be run on the server. Causing the pdfjs code to require("canvas"), which throws an error saying module not found.

Solution:

For the component containing the PDF viewer, disable SSR and use a dynamic import instead. Run import from "use client" component

Example

Display.tsx

"use client";

import React from "react";

import dynamic from "next/dynamic";

const DisplayPDF = dynamic(() => import("./DisplayPDF"), {
  ssr: false,
});

export default function Display() {
  return (
      <div>
        <DisplayPDF />
      </div>
    );
}

DynamicPDF.tsx

"use client";

import React from "react";
import { Viewer, Worker } from "@react-pdf-viewer/core";
import { defaultLayoutPlugin } from "@react-pdf-viewer/default-layout";

export default function DisplayPDF() {
  const defaultLayoutPluginInstance = defaultLayoutPlugin();

  return (
    <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.js">
      <div style={{ height: "750px" }}>
        <Viewer
          fileUrl={"./in-context.pdf"}
          // fileUrl="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
          plugins={[defaultLayoutPluginInstance]}
        />
      </div>
    </Worker>
  );
}

[Tekstar47]

Ran into the same issue but the above fix didn't work for me. Do you mind sharing a dummy repo so I can take a closer look?

[riccardolinares]

It solved my problem!

[abugi]

This solved my issue.