Unable to load a library which is available on jsDelivr

1

I checked the library techan-js is available on jsDelivr, see the link here

However, when I tried to load the library in the following ways, none of them works.

require("techan-js")
require("https://cdn.jsdelivr.net/npm/techan-js@1.0.2/dist/techan.min.js")
require("https://cdn.jsdelivr.net/gh/andredumas/techan.js@master/dist/techan.min.js")

35%20AM
Screen Shot 2019-11-05 at 7.20.35 AM.png1766Ă—680 70.6 KB

Why this is happening? and can I still make use of this library in Observable?

I checked a post with similar question with a solution by Mike here. However, the suggested line of source code in the package.json (as a solution) does not do the trick for me. I still have no idea how to solve this problem. Could anyone give a hand?

Thanks!

2

The bundle published to npm isn’t properly distributed for web development. It uses synchronous require, which is only available in a CommonJS environment such as Node.js. Typically such a bundle would need to be transpiled, such as by bundle.run before being loaded on the web. (But bundle.run isn’t :100: reliable, so I couldn’t get it to load there, either…)

TechanJS provides a web-friendly bundle here:

http://techanjs.org/techan.min.js

However, that file is only available over HTTP, so you won’t be able to access it directly in Observable. (Also, it’s an unversioned URL, which isn’t a great idea since if you use it, your code could break when a new release comes out.) Also, that file depends on d3 being available as a global.

I couldn’t find version 1.0.2 of techan-js anywhere. The GitHub repo only has 0.9.0-0, and techanjs.org only has 0.8.0-0.

Anyhow, I’ve downloaded the web bundle for TechanJS 0.9.0 and attached it as a file to this notebook, so you can see how to load it:

1 Like
3

Thank you so much Mike for such a nice and detailed reply! Also Really appreciate the notebook that practically makes the library available in Observable!

2 Likes