Issue: H3HexagonLayer requires h3-js, but h3-js import via npm fails in Observable

[achirkunov]

As per documentation, H3HexagonLayer requires h3-js to be included before deck.gl. However, importing h3-js using Observable's npm import mechanism results in the h3-js functions not being available to deck.gl.

Reproduction steps

When trying to import h3-js via npm like this:

import * as h3 from "npm:h3-js";
import deck from "npm:deck.gl";
const {DeckGL, H3HexagonLayer, HexagonLayer} = deck;

Observable loads the following resource for h3-js (version 4.1.0):

<link rel="modulepreload" href="./_npm/[email protected]/_esm.js">

But when the H3HexagonLayer is instantiated, deck.gl throws an error as it attempts to call h3-js functions:

deck: initialization of H3HexagonLayer({id: 'heatmap'}): (0,EC.getResolution) is not a function. (In '(0,EC.getResolution)(r)', '(0,EC.getResolution)' is undefined)
deck: initialization of ColumnLayer({id: 'heatmap-hexagon-cell'}): (0,wC.cellToLatLng) is not a function. (In '(0,wC.cellToLatLng)(r)', '(0,wC.cellToLatLng)' is undefined)

I have checked that h3 is available using console.log(h3):

Module {UNITS: Object, areNeighborCells: function, cellArea: function, cellToBoundary: function, cellToCenterChild: function, …}

Temporary workaround

Importing h3-js using a <script> tag works as expected, and H3HexagonLayer can successfully access the h3-js functions. For example:

<script src="https://unpkg.com/h3-js@^4.1.0"></script>
```js
import deck from "npm:deck.gl";
const {DeckGL, H3HexagonLayer, HexagonLayer} = deck;
```

Concern

While using the <script> tag resolves the issue, Observable recommends importing dependencies via the import statement.

[Fil]

This is an issue with the way Deck expects h3 to be a global (window) property, not a Framework bug.

A workaround:

```js
import * as h3 from "npm:h3-js";
window.h3 = h3;
```

```js
h3;
import deck from "npm:deck.gl";
const {Deck, DeckGL, H3HexagonLayer, HexagonLayer} = deck;
```

Note: we need two separate fenced blocks, because imports declarations are hoisted and we have to ensure that the (questionable) window.h3 = h3; runs before the deck import.

[achirkunov]

Thank you Fil - works perfectly now.

[Fil]

Thanks. I've made a more complete example (including H3, DeckGL and maplibregl) here: https://observablehq.observablehq.cloud/pangea/party/h3-deck