How to migrate from pdfjs-dist 3.11.174 to version 4 on a node.js project

[inventivejon]

I hope someone can help me with this issue.

I am using pdfjs-dist version 3.11.174 without any problems in my node.js 20.11.0 typescript project ("target": "esnext", "module": "commonjs", "moduleResolution": "node",)

Now I wanted to upgrade to version 4. But there are only mjs file now.
The problem is that even the documentation for node.js uses

import { getDocument } from 'pdfjs-dist/legacy/build/pdf.mjs';

But when I try to do it this way I get an error from typescript:
Error [ERR_REQUIRE_ESM]: require() of ES Module .../node_modules/pdfjs-dist/build/pdf.mjs not supported.
Instead change the require of .../node_modules/pdfjs-dist/build/pdf.mjs to a dynamic import() which is available in all CommonJS modules.

So then I tried that:
import('pdfjs-dist/legacy/build/pdf.mjs').then(pdfjsLib => {
const { getDocument } = pdfjsLib;
// use getDocument here
}).catch(error => {
console.error('Error loading the module', error);
});

But even then I get nearly the same error message. What do I need to change? Is there somewhere a migration document that explains how to migrate from 3 to 4 for a node.js project?

Thanks in advance.

[inventivejon]

Thanks for moving to correct position

[inventivejon]

Can nobody help?

[nicolo-ribaudo]

You need to set "module": "preserve" in your TS config, so that it doesn't transform your ESM imports to require() calls. You probably then also need to add "type": "module" to your package.json.

[djwlx]

I also want to ask, do I have to use the old version if I want to use it in CommonJs

[djwlx]

If not possible, I would like to know the latest version that supports commonjs

[SebTVisage]

I have the same error when trying to upgrade pdfjs. But my porject is a bit different.

I'm using "module": "commonjs" in my TS config, with node 20. I cannot change module resolution or use type: "module" in my package.json because the migration cost is huge, I get a lot of issues when trying.

So I tried to use a dynamic async import function call, like the error suggests. it compiles and works well locally with ts-node. But when the code is built by TS and runs, I get an error at runtime: "Promise.withResolvers is not a function"

And that is not surprising since this Promise.withResolvers is only available from node 22. And since this is a dynamic import, TS cannot transpile / polyfill it

I think pdfjs is the only package we use that does not export a commonjs build, and I can't find a way to make it work properly.

Any idea?

[nicolo-ribaudo]

For the Promise.withResolvers problem, you should use the legacy build as documented at https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#which-browsersenvironments-are-supported

[SebTVisage]

Ah yes, I had missed this. Thank you!

[snowfluke]

could you share your code please, still experiencing the issue

[matthew-sutterlin]

^^ can you please share your code on how you set this up using the legacy builds, I cant seem to get this to work either when updating from 3 to 4 due to vulnerabilities

[SebTVisage]

Oh sorry I didn't notice the replies to this comment.

Here's what I have:

async function importEsmModule<T>(name: string): Promise<T> {
  // FIXME: see https://stackoverflow.com/questions/65265420/how-to-prevent-typescript-from-transpiling-dynamic-imports-into-require
  // eslint-disable-next-line no-eval
  const module = eval(`(async () => {return await import("${name}")})()`);
  return module as T;
}

async function getPdf(params) {
  const { getDocument } = await importEsmModule<any>('pdfjs-dist/legacy/build/pdf.mjs');
  return getDocument(params)
}

I completely forgot how I came up with it, it's ugly as hell, but it works. And I only call the lib once so it's enough.

[lfoppiano]

Thanks to a friend with knowledge in javascript jungle, I have finally a working version. My project is a streamlit application but you can find the useful information in the repository, https://github.com/lfoppiano/streamlit-pdf-viewer/tree/enable-text-content-2 in particular the important changes: lfoppiano/streamlit-pdf-viewer@5f09846

[MrBOSS2142]

I have the same problem. I was using 3.11.174 version, but it have audit problem, so I need patched 4.x.x version. Does anyone have a solution?

[lfoppiano]

I'm not sure how much it could help, but we did it somehow, the project might be different, however.

lfoppiano/streamlit-pdf-viewer#52

[lfoppiano]

I see now that I provided a better link to the solution here: #17989 (comment)

[snowfluke]

Solved. For those who still getting the error, here's my solution:

tsconfig:

{
  "compilerOptions": {
    "module": "NodeNext",
    "esModuleInterop": true,
    "removeComments": true,
    "allowSyntheticDefaultImports": true,
    "emitDecoratorMetadata": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "NodeNext",
    "importHelpers": true,
    "useDefineForClassFields": false,
    "target": "ES2022",
    "outDir": "./dist",
    "allowJs": true,
    "baseUrl": "./",
    "incremental": true,
    "lib": ["dom"]
  },
  "include": ["**/*.ts"],
  "exclude": ["src/**/*.spec.ts", "./node_modules", "./dist"]
}

my import:

// import some type
import type { PDFDocumentProxy } from "pdfjs-dist";

// dynamic import
async function importPdfLib() {
  const pdfjsLib = await import("pdfjs-dist/legacy/build/pdf.mjs");
  return pdfjsLib;
}

[Erivess]

@snowfluke Thank you! This fixed my problem.

[xiaoyazhengit]

我有同样的问题，项目是vue2,js应该怎么修改呢

[guilherme-francisco]

This fixed my problem: TypeStrong/ts-node#1290 (comment)

[plocket]

Is there still a legacy build available for v4 without typescript and without import?

[robross0606]

I have the same question. It looks like usage in CommonJS projects is no longer possible since version 3. Is that true? It isn't well documented.

[inventivejon]

I actually now jumped from v3 to v5 directly and used node v22 and it worked again. Somehow v4 with old node version seems to cause the problems

[AliLee0923]

I am using "pdfjs-dist" in next.js api route and got this error.

Error extracting text from test.pdf: ReferenceError: DOMMatrix is not defined
at (webpack://pdf.js/src/display/canvas.js:59:21)
57 | // Only used in rescaleAndStroke. The goal is to avoid
58 | // creating a new DOMMatrix object each time we need it.

59 | const SCALE_MATRIX = new DOMMatrix();
| ^
60 |
61 | // Used to get some coordinates.
62 | const XY = new Float32Array(2); {
page: '/api/parse-document'
}

Do you have any thought for this?

[snowfluke]

@AliLee0923 try my package https://www.npmjs.com/package/ppu-pdf

[AliLee0923]

ok, thank you.
let me try.