Why doesn’t a simple cal-heatmap example work on CodePen using ES Module via CDN?

[SauloSA]

Hi there 👋

First of all, thanks for the amazing library — it’s exactly what I need.

I’m trying to run a minimal working example of cal-heatmap on CodePen using the ES Module version from the CDN (cdn.jsdelivr.net). However, the code doesn't seem to work — nothing renders, and no error appears in the console.

Here’s the code I’m using:

https://codepen.io/saulosa/pen/wBvjYdJ

<div id="cal-heatmap"></div>

<script type="module">
  import CalHeatmap from 'https://cdn.jsdelivr.net/npm/cal-heatmap@4.4.2/dist/cal-heatmap.min.js';

  const cal = new CalHeatmap();
  cal.paint({
    itemSelector: '#cal-heatmap',
    range: 1,
    domain: { type: 'month' },
    subDomain: { type: 'day' },
    data: {
      source: [
        { date: '2025-01-01', count: 5 },
        { date: '2025-01-10', count: 15 },
        { date: '2025-01-20', count: 8 },
      ],
      type: 'json',
      x: 'date',
      y: d => d.count,
    },
  });
</script>

This same code works when I run it locally in an .html file using a browser that supports <script type="module">. But on CodePen, nothing happens — even though type="module" is allowed in the Pen settings.

I’d love to understand:

Is this an issue with how CodePen handles module scripts?
Or am I missing something specific to how cal-heatmap should be initialized in that environment?
Thanks in advance for any help!