Import pdfjs-dist not working correctly

[Luluno01]

Link to the code that reproduces this issue

https://github.com/Luluno01/pdfjs-dist-import-reproducer

To Reproduce

1. Start the application in development mode (next dev)
2. Open home page (/)
3. Got an error in dev server console "Attempted import error: 'getDocument' is not exported from 'pdfjs-dist' (imported as 'pdfjs')." and getDocument being undefined.

Current vs. Expected behavior

The ESM package pdfjs-dist should be imported correctly. The actual outcome, however, is nothing will be imported -- all exported objects are undefined, including the default export.

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
Binaries:
  Node: 21.1.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.3-canary.1
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router, TypeScript (plugin, built-in types)

Additional context

Same problem with version "13.5.4" and version "13.0.0".

[Luluno01]

is there an updated solution for this? facing the same issues: import trace for request module/Release/canvas.node

next version 14.0.5

No, I don't find a new solution to this. But you can post the full context and error message here or in a new issue since you are using 14.0.5 which they claimed to have the issue fixed.

[dhallX]

my use case is for a file image generator in a hook

` import pdfjs from "pdfjs-dist";

export default function useFileImageGenerator() {

function getThumbnail(file: File) { const canvas = document.createElement("canvas"); const context = canvas.getContext("2d");

console.log("1", file, canvas, context);

if (context !== null) {
  pdfjs
    .getDocument(file)
    .promise.then(pdfDoc => pdfDoc.getPage(1))
    .then(page => {
      console.log("2", page);
      const viewport = page.getViewport({ scale: 1 });
      canvas.width = viewport.width;
      canvas.height = viewport.height;

      const renderContext = {
        canvasContext: context,
        viewport: viewport,
      };
      console.log("3", renderContext);
      return page.render(renderContext).promise;
    })
    .then(() => {
      const imageDataUrl = canvas.toDataURL("image/png");

      console.log("4", imageDataUrl);
      const blob = dataURLtoBlob(imageDataUrl);
      // Create a File object
      const fileName = `${file.name}_screenshot.png`;

      const thumbnailImage = new File([blob], fileName, { type: "image/png" });
      console.log("5", thumbnailImage);
      return thumbnailImage;
    })
    .catch(error => {
      console.error("unable to convert pdf to image:", error);
    });
}

}

const dataURLtoBlob = (dataURL: string) => { const arr = dataURL.split(","); const mimeMatch = arr[0].match(/:(.*?);/); const mime = mimeMatch ? mimeMatch[1] : "application/octet-stream"; const bstr = window.atob(arr[1]); let n = bstr.length; const u8arr = new Uint8Array(n);

while (n--) {
  u8arr[n] = bstr.charCodeAt(n);
}

return new Blob([u8arr], { type: mime });

};

return getThumbnail; } `

next 14.0.5 pdfjs-dist ^3.11.174 canvas 2.11.2

[Luluno01]

my use case is for a file image generator in a hook

` import pdfjs from "pdfjs-dist";

export default function useFileImageGenerator() {

function getThumbnail(file: File) { const canvas = document.createElement("canvas"); const context = canvas.getContext("2d");

console.log("1", file, canvas, context);

if (context !== null) {
  pdfjs
    .getDocument(file)
    .promise.then(pdfDoc => pdfDoc.getPage(1))
    .then(page => {
      console.log("2", page);
      const viewport = page.getViewport({ scale: 1 });
      canvas.width = viewport.width;
      canvas.height = viewport.height;

      const renderContext = {
        canvasContext: context,
        viewport: viewport,
      };
      console.log("3", renderContext);
      return page.render(renderContext).promise;
    })
    .then(() => {
      const imageDataUrl = canvas.toDataURL("image/png");

      console.log("4", imageDataUrl);
      const blob = dataURLtoBlob(imageDataUrl);
      // Create a File object
      const fileName = `${file.name}_screenshot.png`;

      const thumbnailImage = new File([blob], fileName, { type: "image/png" });
      console.log("5", thumbnailImage);
      return thumbnailImage;
    })
    .catch(error => {
      console.error("unable to convert pdf to image:", error);
    });
}

}

const dataURLtoBlob = (dataURL: string) => { const arr = dataURL.split(","); const mimeMatch = arr[0].match(/:(.*?);/); const mime = mimeMatch ? mimeMatch[1] : "application/octet-stream"; const bstr = window.atob(arr[1]); let n = bstr.length; const u8arr = new Uint8Array(n);

while (n--) {
  u8arr[n] = bstr.charCodeAt(n);
}

return new Blob([u8arr], { type: mime });

};

return getThumbnail; } `

next 14.0.5 pdfjs-dist ^3.11.174 canvas 2.11.2

@huozhi Any thoughts?

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.