TypeError: Cannot read properties of undefined (reading 'dict')

[krisvanrens]

Hi there!

First off, thanks for making decktape, it's a great tool! 😄

I've run into an issue lately, where my Pandoc ➡️ reveal.js presentation (that renders fine in the browser), fails to convert to PDF using decktape. The error I get is:

Loading page file:///censored/decktape-issue/talk.html ...

Page error: TypeError: Cannot read properties of undefined (reading 'Config')
    at file:///censored/decktape-issue/reveal.js/plugin/math/math.js:1:1674
    at HTMLScriptElement.o (file:///censored/decktape-issue/reveal.js/plugin/math/math.js:1:1541)
Loading page finished with status: 0
Reveal JS plugin activated
Printing slide #/decktape-is-awesome (3/4) ...
TypeError: Cannot read properties of undefined (reading 'dict')
make: *** [pdf] Error 1

The error is reproducible and I've managed to single out the page render using --slides 3, and if I then open the resulting PDF file, the PDF reader complains about "an error in the page".

I've published a repo to reproduce the error: https://github.com/krisvanrens/decktape-issue

Build using make pdf

The error has something to do with background images I added to decorate my code snippets in the slides. I've added CSS to the reveal.js theme that adds a programming language logo to the code box on the slide. It seems the error occurs when I include two code boxes with the same language on a single page, see https://github.com/krisvanrens/decktape-issue/blob/main/talk.md

This renders down to:

<section id="decktape-is-awesome" class="slide level2">
<h2>Decktape is awesome!</h2>
<p>Test 1-2-3</p>
<div class="columns">
<div class="column">
<pre ><code class="rust" data-line-numbers="">// ...
// ...</code><div class="langlogo"><div class="rust numbered-block"></div></div></pre>
</div><div class="column">
<pre ><code class="rust" data-line-numbers="">// ...
// ...</code><div class="langlogo"><div class="rust numbered-block"></div></div></pre>
</div>
</div>
</section>

Which looks fine to me, but decktape doesn't take it.

I'd like to help fix this issue, but don't know enough about decktape to know where to start. Any help is appreciated! 🙂

[astefanutti]

Thanks a lot for the detailed report 👍🏼.

The error TypeError: Cannot read properties of undefined (reading 'Config') is actually coming from loading the presentation, and is also reported in the Web browser console:

I've been able to export your presentation, and it opens correctly both in Preview and Chrome: test.pdf.

It seems there is something wrong in the MathJax Reveal.js plugin configuration, and fixing it may likely fix the exported PDF.

[krisvanrens]

Thanks for the swift reply!

Mmmm...my gut feeling says otherwise, but it is a possibility. I've had this MathJax error for years, without ever having trouble exporting to PDF before. Even through many updates of reveal.js and decktape. Also, if I take away one of the two columns in the page, the issue is gone. AFAIK, there's no use of MathJax in the example page whatsoever.

But yes, there is a chance this is a latent bug in MathJax/integration of MathJax triggered by this page.

Let me get back to you! 🙂

[krisvanrens]

By the way: your test.pdf render misses out on the style sheets, so it is not a true comparison I guess. If I render the third page from the repo root directory it looks like this in the browser (which it should):

[krisvanrens]

So, I disabled MathJax in Pandoc, and the initial page loading error is gone, but the PDF rendering problem persists:

/censored/decktape-issue/node_modules/.bin/decktape -p 5000 -s 1920x1080 automatic file:///censored/decktape-issue/talk.html talk.pdf
Loading page file:///censored/decktape-issue/talk.html ...
Loading page finished with status: 0
Reveal JS plugin activated
Printing slide #/decktape-is-awesome (3/4) ...
TypeError: Cannot read properties of undefined (reading 'dict')
make: *** [pdf] Error 1

I updated the repo with the issue with the new build. Again, thanks in advance for taking a look 🙂

[astefanutti]

Here is what I get locally:

$ node decktape.js decktape-issue/talk.html test.pdf
Loading page file:///REDACTED/decktape-issue/talk.html ...

Unable to load resource from URL: file:///REDACTED/decktape-issue/reveal.js/plugin/highlight/kvr.css
Failed to load resource: net::ERR_FILE_NOT_FOUND
Loading page finished with status: 200
Reveal JS plugin activated
Printing slide #/this-one-is-ok (4/4) ...     
Printed 4 slides

It seems the kvr.css stylesheet is missing.

Also, could you confirm you're using the latest Decktape version?

[krisvanrens]

Hi Antonin,

It is strange that you get the Unable to load resource .. error, because the CSS file is right there in the repo. I don't see this error. Perhaps this is due to the fact that I run decktape from within the decktape-issue repo directory?

The way I use decktape is defined in this Makefile rule:

pdf: html
	yarn add puppeteer decktape
	$(shell yarn bin)/decktape -p 5000 -s 1920x1080 automatic file://$(shell pwd)/$(BASE_NAME_TALK).html $(BASE_NAME_TALK).pdf

So make pdf will simply call yarn to install the latest version. This is the full build output (after a make clean):

yarn add puppeteer decktape
yarn add v1.22.17
info No lockfile found.
[1/4] 🔍  Resolving packages...
warning decktape > puppeteer@10.4.0: Version no longer supported. Upgrade to @latest
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 57 new dependencies.
info Direct dependencies
├─ decktape@3.4.0
└─ puppeteer@13.5.0
info All dependencies
├─ @pdf-lib/standard-fonts@1.0.0
├─ @pdf-lib/upng@1.0.1
├─ @types/node@17.0.21
├─ @types/yauzl@2.9.2
├─ agent-base@6.0.2
├─ ansi-styles@4.3.0
├─ balanced-match@1.0.2
├─ base64-js@1.5.1
├─ bl@4.1.0
├─ brace-expansion@1.1.11
├─ buffer-crc32@0.2.13
├─ chalk@4.1.2
├─ color-convert@2.0.1
├─ color-name@1.1.4
├─ concat-map@0.0.1
├─ cross-fetch@3.1.5
├─ decktape@3.4.0
├─ end-of-stream@1.4.4
├─ fd-slicer@1.1.0
├─ find-up@4.1.0
├─ fonteditor-core@2.1.8
├─ fs-constants@1.0.0
├─ fs.realpath@1.0.0
├─ get-stream@5.2.0
├─ glob@7.2.0
├─ has-flag@4.0.0
├─ ieee754@1.2.1
├─ inflight@1.0.6
├─ locate-path@5.0.0
├─ minimatch@3.1.2
├─ minimist@1.2.5
├─ mkdirp-classic@0.5.3
├─ mkdirp@0.5.5
├─ once@1.4.0
├─ p-limit@2.3.0
├─ p-locate@4.1.0
├─ p-try@2.2.0
├─ pako@1.0.11
├─ path-exists@4.0.0
├─ path-is-absolute@1.0.1
├─ pdf-lib@1.17.1
├─ pend@1.2.0
├─ puppeteer-core@10.4.0
├─ puppeteer@13.5.0
├─ readable-stream@3.6.0
├─ safe-buffer@5.2.1
├─ string_decoder@1.3.0
├─ supports-color@7.2.0
├─ tar-stream@2.2.0
├─ tr46@0.0.3
├─ tslib@1.14.1
├─ urijs@1.19.7
├─ util-deprecate@1.0.2
├─ webidl-conversions@3.0.1
├─ whatwg-url@5.0.0
├─ xmldom@0.5.0
└─ yauzl@2.10.0
✨  Done in 68.41s.
/censored/decktape-issue/node_modules/.bin/decktape -p 5000 -s 1920x1080 automatic file:///censored/decktape-issue/talk.html talk.pdf
Loading page file:///censored/decktape-issue/talk.html ...
Loading page finished with status: 0
Reveal JS plugin activated
Printing slide #/decktape-is-awesome (3/4) ...
TypeError: Cannot read properties of undefined (reading 'dict')
make: *** [pdf] Error 1

So decktape is at v3.4.0 as you can see. I get this same error on my macOS and Linux systems.

Calling it by hand directly from the repo directory gives me the same result:

$ node node_modules/decktape/decktape.js talk.html test.pdf
Loading page file:///censored/decktape-issue/talk.html ...
Loading page finished with status: 0
Reveal JS plugin activated
Printing slide #/decktape-is-awesome (3/4) ...
TypeError: Cannot read properties of undefined (reading 'dict')

Could the NodeJS version be of any influence perhaps? I'm using NodeJS v16.14.0 at this moment.

[krisvanrens]

Ah, I seem to have found something, but it's still not 100% correct.

It turns out the page title messes up part of it. When I change out the page title for just 'text', the PDF export works; but the pages are still rendered incorrectly. The thing is, in Pandoc I have the following title field defined:

---
title: <img src='images/rust-logo.png' width='14%' style='margin-top:4%;margin-bottom:-4%' /> for <img src='images/cpp-logo.png' width='14%' style='margin-top:4%;margin-bottom:-4%' /> developers<br/>&nbsp;
author: Kris van Rens
---

Yeah, I know, raw HTML in the markdown file, pretty ugly but it works for me... 😉

But my point is, in the title I'm using this file images/rust-logo.png. Also, on page 3 (the one that fails to render to PDF); there's the same logo being used in the code snippet boxes (via CSS content replacement):

I'm not sure how decktape works internally, but could it be somehow that the lookup for these image items messes up something? I'm just shooting in the dark here.

[krisvanrens]

I may have found something of help: I tried VSCode with debugging to run the PDF conversion using decktape.js. I found that the TypeError occurs here:

function parseXObject([name, entry], xObject) {
    const object = page.node.context.lookup(entry);
    const subtype = object.dict.get(PDFName.of('Subtype'));
  //                       ^^^^

(this is lines 416..418 of decktape.js v3.4.0)

Apparently object is undefined.

[astefanutti]

Thanks a lot. That helped a lot! I've been able to reproduce and I think this is fixed with 2c9d4ea.

I'll cut a release ASAP with the fix so that you can test it.

[astefanutti]

I've just released v3.4.1. Feel free to re-open if needed.

[krisvanrens]

That's awesome! It works 😄 Glad to have been of help!

Keep on the great work 👍🏻