How to use import maps in Observable

Community Help
#1

I spend a lot of time working in Observable notebooks these days and I’m interested in using Deno over Node.js, but a big problem is that most packages on npm don’t provide ESM entry points and Skypack, ESM.sh, and UNPKG don’t work for about 50% of the modules that I try importing from the browser or Deno.

image
image2404×630 107 KB

I was playing with JSPM’s import map generator today and I was able to get some packages working using import maps. However, I’m not sure how to get import maps working in Observable. It looks like Observable overrides the native import function because modules with no prefix automatically resolve to " https://unpkg.com/MODULE_NAME." Is there some way to access the native import function?

#2

Observable doesn’t override the native import function, but we do modify the code during transpilation when you use a dynamic import of a bare specifier to resolve to UNPKG. (We’d like to switch that to Skypack at some point.) You can see what’s going on if you use the debugger statement and step into the code. So, as long as you pass import a full URL and not a bare specifier, Observable should not affect the behavior of dynamic import. Will that work?

#3

I tried that and it looks like the import maps are not working. Here’s the notebook I’m working on: BlueprintJS / Grant Nestor / Observable