🏠 back to Observable

Embedding with Runtime.load seems to no longer load/reference dependencies


#1

@mike I used to be able to specify specific cells with Runtime.load which would in turn load the specified cells’ dependencies. I think this functionality may have broken at some point.

For example: http://ashkenas.com/breakout/ shows several “could not be resolved” errors.


#2

Which version of the Runtime are you using? I don’t see any errors on the Breakout! link, but it is using 1.0.1 of the runtime, whereas the latest version 3.0.5 features a new API and uses a different module format.

Here’s the old and new documentation:

Here’s the old and new generated code:

https://api.observablehq.com/@tmcw/hello-world.js?v=3

https://api.observablehq.com/@tmcw/hello-world.js?v=1


#3

I’m getting CORS errors from unpkg when I click the breakout link. Maybe related to this? https://github.com/unpkg/unpkg.com/issues/174

edit: breakout works for me now :man_shrugging:


#4

@mike Thanks for the references. I used to be able to do something like this:

  <script type="module">
    import {Inspector, Runtime} from "https://unpkg.com/@observablehq/notebook-runtime@1?module";
    import notebook from "https://api.observablehq.com/d/xxxxxxxxx.js";

    const renders = {
      "custom_style": "#style",
      "viewof person_list": "#person_list",
      "viewof input_parameters": "#input_parameters",
      "grid": "#grid",
      "pdf": "#pdf",
      "print": "#print",
    };
    Runtime.load(notebook, (variable) => {
    const selector = renders[variable.name];
    if (selector) {
        return new Inspector(document.querySelector(selector));
    } else {
        return true;
    }
    });
  </script>

But it is failing with version 3. I’ll re-read the documentation – perhaps I missed a usage change. The current error I’m getting is:
viewof person_list = RuntimeError: select is not defined where person_list is the thing I want to render and select is the typical import from import {select, date, button} from "@jashkenas/inputs" which person_list depends on.


#5

Making progress. I think at least one issue may have been that that forgot to add viewof in front of the variable name when referencing it in my embedded version. I’m no longer getting the is not defined error message. Thanks for your help.


#6

The v3 API deprecated the Runtime.load method (and perhaps should have removed it entirely); you should only use that if you’re using v1 of the Runtime. As shown in the README, the new API looks like this:

import {Runtime, Inspector} from "https://unpkg.com/@observablehq/runtime@3/dist/runtime.js";
import define from "https://api.observablehq.com/@tmcw/hello-world.js?v=3";

const runtime = new Runtime();
const main = runtime.module(define, name => {
  if (name === "hello") {
    return new Inspector(document.querySelector("#hello"));
  }
});

In other words, replace Runtime.load with runtime.module, and replace the variable.name with name.


#7

Another potential issue is that the index.html of the download tarball link in Observable seems to still reference version 1.

import {Inspector, Runtime} from "https://unpkg.com/@observablehq/notebook-runtime@1?module";

#8

Ah, this makes sense. I didn’t catch that the Runtime.load method was deprecated. Thank you.