[Bug]: electron-vite (node) Cannot read properties of undefined (reading 'createCanvas')

[fenicento]

Attach (recommended) or Link to PDF file

sample.pdf

Web browser and its version

nodejs

Operating system and its version

windows 11

PDF.js version

4.7.76

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

Yes

Is a browser extension

No

Steps to reproduce the problem

when trying to render a pdf page on canvas, i get the following error:

Error during conversion: TypeError: Cannot read properties of undefined (reading 'createCanvas')
    at NodeCanvasFactory._createCanvas (file:///C:/Users/fenic/projects/db-image-optimizer-electron/node_modules/.pnpm/pdfjs-dist@4.7.76_encoding@0.1.13/node_modules/pdfjs-dist/legacy/build/pdf.mjs:10627:19)
    at NodeCanvasFactory.create (file:///C:/Users/fenic/projects/db-image-optimizer-electron/node_modules/.pnpm/pdfjs-dist@4.7.76_encoding@0.1.13/node_modules/pdfjs-dist/legacy/build/pdf.mjs:5596:25)
    at convertPdfToImages (file:///C:/Users/fenic/projects/db-image-optimizer-electron/out/main/index.js:68:46)
    at async file:///C:/Users/fenic/projects/db-image-optimizer-electron/out/main/index.js:271:20
    at async WebContents.<anonymous> (node:electron/js2c/browser_init:2:83724)
Error occurred in handler for 'convert-pdf': TypeError: Cannot read properties of undefined (reading 'createCanvas')
    at NodeCanvasFactory._createCanvas (file:///C:/Users/fenic/projects/db-image-optimizer-electron/node_modules/.pnpm/pdfjs-dist@4.7.76_encoding@0.1.13/node_modules/pdfjs-dist/legacy/build/pdf.mjs:10627:19)
    at NodeCanvasFactory.create (file:///C:/Users/fenic/projects/db-image-optimizer-electron/node_modules/.pnpm/pdfjs-dist@4.7.76_encoding@0.1.13/node_modules/pdfjs-dist/legacy/build/pdf.mjs:5596:25)
    at convertPdfToImages (file:///C:/Users/fenic/projects/db-image-optimizer-electron/out/main/index.js:68:46)
    at async file:///C:/Users/fenic/projects/db-image-optimizer-electron/out/main/index.js:271:20
    at async WebContents.<anonymous> (node:electron/js2c/browser_init:2:83724)

What is the expected behavior?

it should correctly render the page and save it to a buffer

What went wrong?

file is correctly read, number of pages and viewport are correctly reported, but the render call fails:

const renderTask = page.render(renderContext);
await renderTask.promise;

Link to a viewer

No response

Additional context

this is the conversion function I wrote:

import sharp from 'sharp'
import path from 'path'
import fs from 'fs'

import { getDocument, GlobalWorkerOptions } from "pdfjs-dist/legacy/build/pdf.mjs";

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

export const convertPdfToImages = async (pdfPath, destinationFolder, outputFormat = 'avif', resizeWidth) => {

    // Create output directory if it doesn't exist
    if (!fs.existsSync(destinationFolder)) {
        fs.mkdirSync(destinationFolder, { recursive: true });
    }

    // Create output directory path using PDF filename
    const pdfFilename = path.basename(pdfPath, '.pdf')
    const outputDir = path.join(destinationFolder, pdfFilename)

    try {
        // Load the PDF file
        const data = new Uint8Array(fs.readFileSync(pdfPath));
        const loadingTask = getDocument({ data });
        const pdf = await loadingTask.promise;
        
        console.log(`PDF loaded. Number of pages: ${pdf.numPages}`);

        // Process each page
        for (let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++) {
            const page = await pdf.getPage(pageNumber);
            
            const canvasFactory = pdf.canvasFactory;
            const viewport = page.getViewport({ scale: 1.0 });
            const canvasAndContext = canvasFactory.create(
                viewport.width,
                viewport.height
            );
            const renderContext = {
                canvasContext: canvasAndContext.context,
                viewport,
            };

            const renderTask = page.render(renderContext);
            await renderTask.promise; 
            // Convert the canvas to an image buffer.
            const buffer = canvasAndContext.canvas.toBuffer();

            const outputPath = path.join(outputDir, `page-${String(pageNumber).padStart(3, '0')}.${outputFormat}`);

            // Process with Sharp and save
            let sharpInstance = sharp(buffer);

            // Resize if width specified
            if (resizeWidth) {
                sharpInstance = sharpInstance.resize({ 
                    width: resizeWidth,
                    withoutEnlargement: true,
                    fit: 'inside'
                });
            }

            await sharpInstance
                .toFormat(outputFormat)
                .toFile(outputPath);

            // Clean up canvas resources
            canvasFactory.destroy(canvasAndContext);

            console.log(`Page ${pageNumber} saved as ${outputPath}`);
        }

        console.log('Conversion completed successfully!');
        return destinationFolder;
    } catch (error) {
        console.error('Error during conversion:', error);
        throw error;
    }
}

this is the package.json:

{
  "name": "db-image-optimizer-electron",
  "version": "1.0.0",
  "description": "An Electron application with Svelte",
  "main": "./out/main/index.js",
  "type": "module",
  "author": "example.com",
  "homepage": "https://electron-vite.org",
  "scripts": {
    "format": "prettier --plugin prettier-plugin-svelte --write .",
    "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
    "start": "electron-vite preview",
    "dev": "electron-vite dev",
    "build": "electron-vite build",
    "postinstall": "electron-builder install-app-deps",
    "build:unpack": "npm run build && electron-builder --dir",
    "build:win": "npm run build && electron-builder --win",
    "build:mac": "npm run build && electron-builder --mac",
    "build:linux": "npm run build && electron-builder --linux"
  },
  "dependencies": {
    "@electron-toolkit/preload": "^3.0.1",
    "@electron-toolkit/utils": "^3.0.0",
    "bootstrap": "^5.3.3",
    "bootstrap-icons": "^1.11.3",
    "idb-keyval": "^6.2.1",
    "pdfjs-dist": "^4.7.76",
    "sass": "^1.80.4",
    "sharp": "^0.33.5",
    "svelte-spa-router": "^4.0.1",
    "tinybase": "^5.3.5"
  },
  "devDependencies": {
    "@electron-toolkit/eslint-config": "^1.0.2",
    "@electron-toolkit/eslint-config-prettier": "^2.0.0",
    "@electron/rebuild": "^3.7.0",
    "@sveltejs/vite-plugin-svelte": "^3.1.1",
    "electron": "^31.0.2",
    "electron-builder": "^24.13.3",
    "electron-vite": "^2.3.0",
    "eslint": "^8.57.0",
    "eslint-plugin-svelte": "^2.41.0",
    "prettier": "^3.3.2",
    "prettier-plugin-svelte": "^3.2.5",
    "svelte": "^5.1.2",
    "vite": "^5.3.1"
  }
}

[fenicento]

after further investigation I noticed that the dynamic import of canvas from pdf.mjs fails:

if (isNodeJS) {
  var packageCapability = Promise.withResolvers();
  var packageMap = null;
  const loadPackages = async () => {
    const fs = await import(/*webpackIgnore: true*/"fs"),
      http = await import(/*webpackIgnore: true*/"http"),
      https = await import(/*webpackIgnore: true*/"https"),
      url = await import(/*webpackIgnore: true*/"url");
    let canvas, path2d;
    try {
      canvas = await import(/*webpackIgnore: true*/"canvas");
    } catch {}
    try {
      path2d = await import(/*webpackIgnore: true*/"path2d");
    } catch {}
    return new Map(Object.entries({
      fs,
      http,
      https,
      url,
      canvas,
      path2d
    }));
  };
...

the canvas variable is null after initialization. Any ideas on how to solve this?