Loading external css-files does not work in Puppeteer

Question

I am using pagedjs to create PDFs, which uses puppeteer.

I try to load a page and I am getting the following exception:

Error: Evaluation failed: ProgressEvent
    at ExecutionContext._ExecutionContext_evaluate (file:///.../main/print-microservice/node_modules/puppeteer/lib/esm/puppeteer/common/ExecutionContext.js:282:15)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async ExecutionContext.evaluate (file:///.../main/print-microservice/node_modules/puppeteer/lib/esm/puppeteer/common/ExecutionContext.js:114:16)
    at async Printer.render (file:///.../main/print-microservice/node_modules/pagedjs-cli/src/printer.js:182:4)
    at async Printer.pdf (file:///.../main/print-microservice/node_modules/pagedjs-cli/src/printer.js:250:14)
    at async file:///.../main/print-microservice/node_modules/pagedjs-cli/src/cli.js:159:11

I narrowed it down to the following line, I have in my page:

<link rel="stylesheet" type="text/css" href="https://www.example.com/custom-theme.css">

As soon as I remove the stylesheet, or even inline the CSS, the page gets rendered fine.

I also get the exception if the CSS file is empty.

Is there a resolution to this problem?

Thanks in advance

Answer 1

For me this error was essentially a 404: the stylesheet in question wasn't present (I was going Quarto -> Pandoc -> PagedJS CLI, and the stylesheet was in my project directory but wasn't being transferred to the book output directory where PagedJS would transform the HTML into a PDF).

Verify that the stylesheet is actually at the path the HTML expects it to be (especially if the HTML is an intermediate format being pre-rendered by something else and isn't in the same directory as your actual source code).