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.
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?
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?
Hi Grant, see my shared state notebook for a possible implementation of importmaps. It makes use of JSPM for pre-bundling and generating the importmap as recommended by @mootari.
