[Bug]: Cannot load "@napi-rs/canvas" package: "Error: Cannot find module '@napi-rs/canvas'

[soadzoor]

Attach (recommended) or Link to PDF file

https://github.com/mozilla/pdf.js/files/13179307/c53a656b-551d-4c24-bfb6-f994ef3a6d4b.pdf

But I believe it has nothing to do with the PDF file itself.

Web browser and its version

Node.js v22.11.0

Operating system and its version

Ubuntu 22.04.2 LTS (but I tried with newest MacOS as well, same issue...)

PDF.js version

4.9.124

Is the bug present in the latest PDF.js version?

No

Is a browser extension

No

Steps to reproduce the problem

1. Clone this repo: https://github.com/soadzoor/node-pdfjs
2. Run npm install
3. Run node index.js

What is the expected behavior?

It should generate a PNG file

What went wrong?

It generates a runtime error when running node index.js:
Unfortunately, it gives me a runtime error:
node index.js
Warning: Cannot load "@napi-rs/canvas" package: "Error: Cannot find module '@napi-rs/canvas'
Require stack:

• /home/runner/work/pdf.js/pdf.js/src/display/node_utils.js".
  Warning: Cannot polyfill DOMMatrix, rendering may be broken.
  Warning: Cannot polyfill ImageData, rendering may be broken.
  Warning: Cannot polyfill Path2D, rendering may be broken.
  PDF loaded
  Page loaded
  node:internal/modules/cjs/loader:1249
  const err = new Error(message);
  ^

Error: Cannot find module '@napi-rs/canvas'
Require stack:

• /home/runner/work/pdf.js/pdf.js/src/display/node_utils.js
  at Function._resolveFilename (node:internal/modules/cjs/loader:1249:15)
  at Function._load (node:internal/modules/cjs/loader:1075:27)
  at TracingChannel.traceSync (node:diagnostics_channel:315:14)
  at wrapModuleLoad (node:internal/modules/cjs/loader:218:24)
  at Module.require (node:internal/modules/cjs/loader:1340:12)
  at require (node:internal/modules/helpers:141:16)
  at NodeCanvasFactory._createCanvas (file:///home/soadzoor/works/node-pdfjs/node_modules/pdfjs-dist/legacy/build/pdf.mjs:10769:20)
  at NodeCanvasFactory.create (file:///home/soadzoor/works/node-pdfjs/node_modules/pdfjs-dist/legacy/build/pdf.mjs:10241:25)
  at file:///home/soadzoor/works/node-pdfjs/index.js:37:46 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/home/runner/work/pdf.js/pdf.js/src/display/node_utils.js' ]
  }

Node.js v22.11.0

Link to a viewer

No response

Additional context

I was happy to learn that pdfjs replaced node-canvas with a new canvas implementation (@napi-rs/canvas) which has much less dependencies. This fact also gave me hope that the bug I reported a long time ago might be fixed now, so I gave it a shot.

First I created the canvas context like this:

import {createCanvas} from "@napi-rs/canvas";

var canvas = createCanvas(2048, 2048);
var context = canvas.getContext('2d');

Then I checked the official examples, and based on those, I replaced those with these lines below, and removed the @napi-rs/canvas dependency from my package.json, deleted node_modules and ran npm install again:

const canvasFactory = pdf.canvasFactory;
const canvasAndContext = canvasFactory.create(2048, 2048);

Unfortunately, I still have the same issue.

What am I doing wrong?

[nicolo-ribaudo]

This is indeed a bug in how pdfjs-dist gets bundled before publishing it pdfjs-dist/legacy/build/pdf.mjs contains a hard-coded path from where it gets published from:

class NodeCanvasFactory extends BaseCanvasFactory {
  _createCanvas(width, height) {
    const require = process.getBuiltinModule("module").createRequire("file:///home/runner/work/pdf.js/pdf.js/src/display/node_utils.js");
    const canvas = require("@napi-rs/canvas");
    return canvas.createCanvas(width, height);
  }
}

[soadzoor]

This is indeed a bug in how pdfjs-dist gets bundled before publishing it pdfjs-dist/legacy/build/pdf.mjs contains a hard-coded path from where it gets published from:

class NodeCanvasFactory extends BaseCanvasFactory {
  _createCanvas(width, height) {
    const require = process.getBuiltinModule("module").createRequire("file:///home/runner/work/pdf.js/pdf.js/src/display/node_utils.js");
    const canvas = require("@napi-rs/canvas");
    return canvas.createCanvas(width, height);
  }
}

How does anyone use pdfjs in nodejs with this bug?

[nicolo-ribaudo]

One uses an older version 😅

It'd be great if you could open a PR to fix this regression. There are two usages of import.meta.url in

pdf.js/src/display/node_utils.js

Line 38 in d448953

.createRequire(import.meta.url);

, and Webpack is replacing it while it should leave it as-is. I'm not good enough at Webpack to quickly tell how to fix it, but the webpack config is defined in https://github.com/mozilla/pdf.js/blob/master/gulpfile.mjs.

[soadzoor]

One uses an older version 😅

It'd be great if you could open a PR to fix this regression. There are two usages of import.meta.url in

pdf.js/src/display/node_utils.js

Line 38 in d448953

.createRequire(import.meta.url);

, and Webpack is replacing it while it should leave it as-is. I'm not good enough at Webpack to quickly tell how to fix it, but the webpack config is defined in https://github.com/mozilla/pdf.js/blob/master/gulpfile.mjs.

I've tried 4.7.76 and v4.8.69 , they don't work either, I have the following runtime error there:

Anyway, I can see that @Snuffleupagus already submitted a PR for this, thanks!

[cponcsak]

Hi everyone. Is there a planned hot fix release for this or will it be held until the next scheduled release?

[soadzoor]

Hi everyone. Is there a planned hot fix release for this or will it be held until the next scheduled release?

It's not my call, but if it's not too much trouble, I'd vote for a hotfix, because we can't use pdf.js in node.js with the last 3 versions because of this, it seems. I'm surprised I was the first one to report this.

[timvandermeij]

The fix for this issue is now released in PDF.js version 4.9.155.