Getting an error while trying to use a custom shortcode - "Uncaught TypeError: window.datawrapper.render is not a function"

support
21

image
image363×821 80.2 KB

At this point we have definitely proven this is specific to your environment, and in no way related to Hugo. So…

22

Yep, seems like it. I’m at a total loss for what else could be the variable to debug.

23

image
image292×173 6.29 KB

hugo 
grep "id=\"datawrapper\"" public/blog/netflix-av1-investigation/index.html

<h2 id="datawrapper">Datawrapper<a hidden class="anchor" aria-hidden="true" href="#datawrapper">#</a></h2>

24

Oh wow that was it! the H2 test heading :man_facepalming:

Appreciate the help so much, thank you! :pray:

25

Yeah, sorry about that. I should have seen that immediately when opening your markdown file. It worked for me because, before testing, I changed/added headings so I would know which shortcode was rendering what.

Then I went back to the original markdown file and saw the problem.

Hugo uses Goldmark to render markdown to HTML, and our default configuration includes…

[markup.goldmark.parser]
autoHeadingID = true

…which adds an id attribute to each markdown heading (H1-H6). So you would have had to search the public directory, not your source, for “datawrapper”.

This was a valuable learning exercise for me, so, thanks.

26

Oh no not at all! Thank you for hanging in there with me to figure this out :slight_smile:

So you would have had to search the public directory, not your source, for “datawrapper”.

Yep, I should have looked at the generated files as well.