Billboard fails to load as an ES6 module

Description

I’m trying to use billboard as a dependency in a dynamically loaded module, which tries to load billboard with:

import './billboard.js';

But this fails with the error TypeError: Cannot read properties of undefined (reading 'd3'). Debugging tells me that the issue is due to this being undefined in a module. The this usage at billboard.js 3.3.3 line 16 seems to be meant to be the window object.

As the module doing the import is dynamically loaded, I cannot add the billboard script tag to the html.

I’ve also tried the billboard.pkgd.js script, resulting in TypeError: Cannot set properties of undefined (setting 'bb'). Debugging shows a similar setup as in the billboard.js script, trying to use this as the window object.

Is there a way to use billboard as an import in this way? Or can you modify the script to use the window object?

Steps to check or reproduce

<script type="module" src="some-module.js"></script>

// some-module.js
import './d3.min.js';
import './billboard.js'; // fails

// do something with billboard

[qsiebers]

If you aren’t aware on browser compatibility, you can use import maps to fix that.

I was not yet aware of import-maps, thanks for the pointer! I’ll have to experiment a bit and see how this matches our browser compatibility requirements.

But if you’re loading it directly(not by package resolution) as ESM, try using the distribution from dist-esm folder.

This might be an interesting point to add to the readme.

[netil]

The ESM distribution’s dependencies imports are pointed as “module-name”. When you check the billboard.js’ ESM dist file, all the necessary dependencies imports are defined at the top as:

import { timeParse, utcParse, timeFormat, utcFormat } from 'd3-time-format';
import { pointer, select, namespaces, selectAll } from 'd3-selection';
...

So, to execute it needs load those imports first. As you pointed, to be imported directly to the browser (w/o transpilation), the “module-name” location should be relative or some origin where browser could identify.

If you aren’t aware on browser compatibility, you can use import maps to fix that.

<!-- specify importmaps to mapping dependencies modules and its location --->
<script type="importmap"> 
    {
      "imports": {
        "d3-time-format": "https://cdn.skypack.dev/d3-time-format",
        "d3-selection": "https://cdn.skypack.dev/d3-selection",
        "d3-brush": "https://cdn.skypack.dev/d3-brush",
        "d3-dsv": "https://cdn.skypack.dev/d3-dsv",
        "d3-drag": "https://cdn.skypack.dev/d3-drag",
        "d3-scale": "https://cdn.skypack.dev/d3-scale",
        "d3-transition": "https://cdn.skypack.dev/d3-transition",
        "d3-axis": "https://cdn.skypack.dev/d3-axis",
        "d3-ease": "https://cdn.skypack.dev/d3-ease",
        "d3-interpolate": "https://cdn.skypack.dev/d3-interpolate",
        "d3-shape": "https://cdn.skypack.dev/d3-shape",
        "d3-zoom": "https://cdn.skypack.dev/d3-zoom"
      }
    }
</script>
<script type="module">
import bb, {area, line} from "https://unpkg.com/billboard.js/dist-esm/billboard.js";

bb.generate( ... );
</script>

And here’s working demo:

• https://codepen.io/netil/pen/NWXvJrW