import * as pdfjsLib from "pdfjs-dist/build" issues.

[i-dkz]

Configuration:

• Web browser and its version: Chrome or Firefox
• Operating system and its version: MacOS12.6 and Windows11
• PDF.js version:
  "pdfjs": "^2.5.3",
  "pdfjs-dist": "^4.0.379",

Issue was persistent whether I did it in a Next.js project , or with just plain HTML/CSS/JS.

importing in Next.js:

import pdfjsLib from "pdfjs-dist"; <- this doesn't cause the issue yet but when I do this:

pdfjsLib.GlobalWorkerOptions.workerSrc = '../../node_modules/pdfjs-dist/build/pdf.worker.mjs';

This causes:

Unhandled Runtime Error

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `StaticGenerationSearchParamsBailoutProvider`.

Importing in .js file in vanilla project:

I have this code in a .js file and it causes the error:

SyntaxError: import declarations may only appear at top level of a module

import * as pdfjsLib from 'pdfjs-dist/build'

pdfjsLib.GlobalWorkerOptions.workerSrc =
  "../../node_modules/pdfjs-dist/build/pdf.worker.mjs";

async function extractText() {
  const fileInput = document.getElementById("fileInput");
  const file = fileInput.files[0];

  if (!file) {
    console.error("No file selected.");
    return;
  }

  const pdfData = await file.arrayBuffer();
  const loadingTask = pdfjsLib.getDocument(pdfData);

  loadingTask.promise.then(async function (pdf) {
    const page = await pdf.getPage(5);

    // Extract text from the PDF
    const textContent = await page.getTextContent();
    // const textItems = textContent.items.map((item) => item.str);
    // const extractedText = textItems.join(" ");

    // // Log the extracted text to the console
    // console.log("Extracted Text:", extractedText);
    let extractedNumber = 0;
    textContent.items.forEach((item) => {
      if (
        item.str.toLowerCase().includes("watt") ||
        item.str.includes("wh") ||
        item.str.includes("rating")
      ) {
        const numbers = item.str.match(/\d+/g);
        if (numbers) {
          extractedNumber = parseInt(numbers[0]);
          console.log(extractedNumber); // Output: 123
        } else {
          console.log("No numbers found in the string");
        }
      }
    });

    const inputElement = document.getElementById("wattHours");

    // Check if the input element exists
    if (inputElement) {
      // Set the value of the input element
      inputElement.value = extractedNumber;
    } else {
      console.error("Input element not found.");
    }
  });
}

// Define the function in the global scope
window.extractText = extractText;

Importing in <script> directly in HTML:

This actually works in development, i'm able to successfully take a pdf input and parse and extract data from it. But when I deploy it on netlify or vercel, it gets blocked due to some TextMIME error about websniffing?

<script src="../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script>

<script id="script" type="module">
      pdfjsLib.GlobalWorkerOptions.workerSrc =
        "../../node_modules/pdfjs-dist/build/pdf.worker.mjs";

      async function extractText() {
        const fileInput = document.getElementById("fileInput");
        const file = fileInput.files[0];

        if (!file) {
          console.error("No file selected.");
          return;
        }

        const pdfData = await file.arrayBuffer();
        const loadingTask = pdfjsLib.getDocument(pdfData);

        loadingTask.promise.then(async function (pdf) {
          const page = await pdf.getPage(5);

          // Extract text from the PDF
          const textContent = await page.getTextContent();
          // const textItems = textContent.items.map((item) => item.str);
          // const extractedText = textItems.join(" ");

          // // Log the extracted text to the console
          // console.log("Extracted Text:", extractedText);
          let extractedNumber = 0;
          textContent.items.forEach((item) => {
            if (
              item.str.toLowerCase().includes("watt") ||
              item.str.includes("wh") ||
              item.str.includes("rating")
            ) {
              const numbers = item.str.match(/\d+/g);
              if (numbers) {
                extractedNumber = parseInt(numbers[0]);
                console.log(extractedNumber); // Output: 123
              } else {
                console.log("No numbers found in the string");
              }
            }
          });

          const inputElement = document.getElementById("wattHours");

          // Check if the input element exists
          if (inputElement) {
            // Set the value of the input element
            inputElement.value = extractedNumber;
          } else {
            console.error("Input element not found.");
          }
        });
      }
      // Define the function in the global scope
      window.extractText = extractText;
    </script>

can't find answers anywhere. nothing's working

[manuelei]

Same problem here. I just wasted two days on this :-(. While I have no fix, a workaround is to use v3 of pdfjs-dist:

npm uninstall pdfjs-dist
npm install pdfjs-dist@3.11.174

Note that you need to change the worker path from .mjs to .js:

import * as pdfjs from 'pdfjs-dist';
pdfjs.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.js');

Some further thoughts:

I suspect the problem might arise due .mjs being a module. Therefore, I tried importing it with

import * as pdfWorker from "pdfjs-dist/build/pdf.worker.mjs";
pdfjs.GlobalWorkerOptions.workerSrc = pdfWorker;

While this avoids the mentioned error when importing only, I get the error as soon as I use getDocument()...

[piotrberlowski]

Why was this ticket/discussion closed? I'm running into exactly same issue trying to parse PDF document in nextjs.

[i-dkz]

Here was my fix in next.js:

In Next.js:

• install react-pdf (this uses pdfjs)
• ensure that pdfjs and anything related is removed from node_modules and uninstalled
• put 'import { pdfjs } from react-pdf ' in whichever file you're using it in
• define pdfjs worker ( pdfjs.GlobalWorkerOptions.workerSrc = //unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js; )

[piotrberlowski]

Thank you for even putting it on the map. My solution was to downgrade to v3, do the global worker and also include the custom loader for canvas into nextjs

[i-dkz]

Here were my fixes:

In Next.js implementation:

• install react-pdf (this uses pdfjs)
• ensure that pdfjs and anything related is removed from node_modules and uninstalled
• put 'import { pdfjs } from react-pdf ' in whichever file you're using it in
• define pdfjs worker ( pdfjs.GlobalWorkerOptions.workerSrc = //unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js; )

In vanilla html file implementation

• i downloaded the pdfjs.min.mjs and pdfjsworker.min.mjs files and served them with my project

In Astro/HTMX/Alpine.js implementation - my newest version

• similar to next.js only i was forced to use the CDN as i am not using react for this
• <script src="https://unpkg.com/pdfjs-dist@4.0.379/build/pdf.min.mjs" type="module"></script> in my astro page
• another <script> in the same page,
  • with const { pdfjsLib } = globalThis;
  • pdfjsLib.GlobalWorkerOptions.workerSrc = "https://unpkg.com/pdfjs-dist@4.0.379/build/pdf.worker.min.mjs";

With frameworks like next/astro, there's an issue since node_modules is not served, i'm not exactly sure what the right way to go about it is in astro but in next it's easy to just use react-pdf.

this seemed to solve my issues and worked when i deployed to vercel

[tiagodreis]

@i-dkz i'd just like to THANK YOU for this. I was completely blocked - thank you!

[joshuasoup]

if it uses pdfjs does that mean i can also somehow create a textlayer. The main reason I wanted to use pdf.js was cause' it flowed seamlessly with the page. Can I keep that even using react-pdf?