I’m publishing a couple of new esm packages on npm that I want to be compatible with observable. Is there a guide on the best way to do this?
I’m currently exporting esm/cjs/iife formats (using tsup, with extentions: .js/.cjs/.iife.min.js respectively) but none seem to work as expected in observable. My goal is to have things work with both require(‘libname’) and import(‘libname’).
Interestingly, when I hardcode the path to my iife on unpkg, I get the following object back:
encode: ƒ(N, K),
decode: ƒ(N, K),
unescape: ƒ(N, K)
I would recommend to test with esm.run or esm.sh instead of unpkg, e.g.
While Observable still defaults to unpkg for dynamic imports it’s something we want to change once we can do so without breaking existing notebooks.
Edit: I missed your remark about wanting to support pathless imports. For what it’s worth, I wouldn’t put to much weight on them as they are kind of an observablism (at least in the case of import() rewriting).
… but to answer your actual question: Your package.json specifies
./dist/riscript.iife.min.js as entrypoint for
browser, but the file is missing from your package.
The path should likely read
By the way, both unpkg and jsdelivr let you browse a package’s contents:
Thanks @mootari, I have fixed the browser field (good catch), but I still get that same strange object when I use the iife:
That appears to be the
he package, which coincidentally is also the package that unpkg chokes on during import(): https://firstname.lastname@example.org?module
I don’t know what went wrong with the UMD bundling, but at least for
he it seems to me that you won’t be able to make
import("rjs3") work unless you can either bundle
he or import it remotely as ESM.
So “he” is already bundled in the iife. And when I run either of the following in node, I get the expected outcome. It is a bit perplexing, but only via
require in observable do I get the “he” export.
import('./dist/riscript.min.js').then(rs => console.log(rs.default));