observablehq

import and use remark & rehype plugins in Observable

Import Stubborn Modules in Observable

With the introduction of require, observable has enabled us to use thousands of open-source JavaScript modules in notebooks. This has worked fine couple of years back. But few notebooks are starting to return error now.

I'm looking for a way to use remark & rehype plugins in observable. This is an example notebook that I would like to be able to run successfully. In this notebook, I noticed that the error was while requiring the module, so I tried updating it to the latest version (using require-debugger), but it returns an empty object (screenshot below). So the related cells return not a function error

Does newer versions of Observable have limited support for require? If not how to get this to work?

Updated version to require

Solution

  • A solution for this particular module might be to load it like this:

    remark = import("https://cdn.skypack.dev/remark@14.0.1?min").then(d => d.remark)

    Note that this issue is not specific to Observable, but happens upstream (on bundle.run). I tried to build the older version with a locally-hosted packd (the software that powers bundle.run), and I get the same error as the one that shows on bundle.run.