Loading a module to Observable

New To Observable
1

Hi! I am trying to load this module into Observable:

I’ve looked at this article and tried different tools including jsdelivr, unpkg and others but nothing seems to work. Could someone please help? Sorry if the question is too amateurish. I am new to JS and Observable.

Thank you,
Andrii

2

There is some limitation on what NPM module you can load to Observable Notebooks. Not all modules are compatible for loading over network and use in browser.

There is Requirements for require section in your linked article for more details about the limitation. But I don’t know Node/NPM enough either to determine if the module you want to load falls into the catagory.

3

I looked into this and sadly I couldn’t get it to work myself. The problem is how these modules are authored.

Normally what I recommend is using jsDelivr’s ES modules CDN which is the most modern, standard, and reliable way of loading npm modules into the browser. However, some libraries aren’t distributed in a way that makes them easily loadable in a browser — they assume you’re using Node.js and have some complicated toolchain of webpack or rollup or whatever to produce a bundle for you that works in a browser.

You can load deck.gl in a browser just fine like so using their pre-bundled dist.min.js:

import deckgl from "https://cdn.jsdelivr.net/npm/deck.gl/dist.min.js/+esm";

In Observable Framework, you can shorten this as:

import deckgl from "npm:deck.gl/dist.min.js/+esm";

In Observable notebooks, you can use an equivalent dynamic import:

deckgl = import("https://cdn.jsdelivr.net/npm/deck.gl/dist.min.js/+esm");

Ideally it would not be necessary to include the dist.min.js part, but the problem is that deck.gl’s conditional exports assumes that you’re only going to use the package in Node.js and so doesn’t export the dist.min.js that is intended to be consumed in a browser. When I investigated this previously, I also noticed some other problems with undeclared dependencies (where a module imports another module that isn’t declared in the package.json file, which can still work sometimes in Node if the imported module is an indirect dependency, but which doesn’t work well with jsDelivr’s ESM API and isn’t a good practice).

So, probably you’ll need to use Rollup or esbuild or similar tools in order to create a distribution of this library that will work in the browser, or reach out to the maintainers of the library and see if they can make the necessary changes to make it browser-compatible.

2 Likes
4

Thank you very much for a very comprehensive answer. I will try reaching out to the library’s maintainers.