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

support
1

I’m trying to use a custom shortcode for embedding charts from Datawrapper

Here’s the error I’m getting

Uncaught TypeError: window.datawrapper.render is not a function
    <anonymous> https://datawrapper.dwcdn.net/U6tiS/embed.js?v=4:3

Here are details on embed script Datawrapper provides

Here is the shortcode html code

<div style="min-height:384px">
    <script type="text/javascript"  src="https://datawrapper.dwcdn.net/{{ .Get 0 }}/embed.js?v={{ .Get 1 }}" data-dark="true"
        charset="utf-8"></script>
    <noscript>
        <img src="https://datawrapper.dwcdn.net/{{ .Get 0 }}/full.png"
        alt="Blog title" />
    </noscript>
</div>

Is this an issue with my shortcode html or something that needs to be fixed with the Datawrapper embed.js script? How can I debug this further?

2

Works for me. Try it:

git clone --single-branch -b hugo-forum-topic-47658 https://github.com/jmooring/hugo-testing hugo-forum-topic-47658
cd hugo-forum-topic-47658
hugo server

Called with:

{{< datawrapper jGBxs 1 >}}
3

That’s so weird!

I’m running the latest Hugo version on Brew and serving using hugo server -D -F

hugo v0.121.1-00b46fed8e47f7bb0a85d7cfc2d9f1356379b740+extended darwin/arm64 BuildDate=2023-12-08T08:47:45Z VendorInfo=brew

Is the branch you’re referencing just a fork of master today?

4

The repository that I referenced above is a test site, with branches for many different test cases.

5

Got it. Your branch worked and I can see the Datawrapper map on the page.

I don’t see difference between your and my shortcode html. What else can I look at to debug this?

6

Which browser, including version, are you using?

7

I’ve tried latest versions of Firefox, Chrome, Brave, Edge, Orion with enhanced tracking features turned off as well. All of them showed your branch loading the chart while my local site ran into the error.

8

Hard to say without access to your project.

See Requesting Help.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

9

And when I do this I see your chart:

{{< datawrapper U6tiS 4 >}}
10

Search your codebase for “datawrapper”…

Maybe you have an element with an id attribute of the same name on that page. For example:

<div id="datawrapper">foo</div>
11

That’s pretty weird. So it’s not the chart and it’s not my hugo version. I checked your other suggestion about id=“datawrapper” and didn’t find any div with that name.

Can’t figure out what other variable there is to debug.

It’s a pretty standard hugo blog with Papermod (GitHub - adityatelange/hugo-PaperMod: A fast, clean, responsive Hugo theme.) theme installed.

I’m not sure what other code I can share besides the shortcode html to debug this.

12

The entire project, privately if you wish. I don’t like guessing.

13

Sure, how can I send a link or project zip privately? I’m not seeing a way to DM on here

14

Open his profile. You will see a message button.

15

I must be missing something obvious or maybe I’m too new here but I don’t see a message button. Here’s what I see

image
image1920×1607 111 KB

16

I bumped your privileges. Please look again. You might have to refresh.

17

Thank you! I see the button now :slight_smile:

18

Using the project directory you provided privately… no problems.

image
image826×915 82.7 KB

Maybe you need to clear your cache or something.

19

Also, test in incognito/private mode.

20

Already tried that (private mode). Are you seeing both charts for datawrapper (3 charts on page)? There are two embeds from datawrapper - one iframe based and second script based.