🏠 back to Observable

embedding viewof error - radio could not be resolved

I have a notebook which I’m trying to embed in a webpage. When I try and embed a radio button I get an error

viewof p = RuntimeError: radio could not be resolved

I’ve embedded some other cells with no issue. - actually not true, seems only the logo is resolving.

I see in this example a viewof radio button cell can be embedded and when I try and embed from the notebook in the example above, I can. I’ve even copied the radio button cell I want from that example into my notebook but I still get the above error. Here’s a link to my notebook (the cell I want to embed is the first one - viewof p).

https://observablehq.com/d/xxxx

The code I’m using to embed (again, this works for the example notebook from above).

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

  // Your notebook, compiled as an ES module.
  import notebook from "https://api.observablehq.com/d/xxxjs";

  const renders = {
    "viewof p": "#viewof-p"
  };
  
  for (let i in renders)
    renders[i] = document.querySelector(renders[i]);

  Runtime.load(notebook, (variable) => {

    if (renders[variable.name]){
      return new Inspector(renders[variable.name]);}
  });

I wonder is there something about my notebook (which has lots of data sources) that is leading to this error?

The underlying issue here is that the “input” cell appears twice in https://api.observablehq.com/d/09fe7ea0f0ac07fd.js

There are a few solutions described in this recent thread. The most future-proof one is to switch to using the v3 module format like this:

<script type="module">
  import {
    Runtime,
    Inspector
  } from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";

  // Your notebook, compiled as an ES module.
  import define from "https://api.observablehq.com/d/09fe7ea0f0ac07fd.js?v=3";

  const renders = {
    "viewof p": "#viewof-p"
  };

  for (let i in renders)
    renders[i] = document.querySelector(renders[i]);

  const runtime = new Runtime();
  const main = runtime.module(define, name => {
    if (renders[name]) {
      return new Inspector(renders[name]);
    }
  });
  </script>
2 Likes

Great. that’s very helpful. Just a follow up. Is it possible to import the default observable styles when embedding? Most of the examples I see don’t do that (i.e., https://jsfiddle.net/5w906pL1/20/)

I ended up just copying the observable css from the dev tools.

I’m no lawyer, but I wouldn’t recommend copying large amounts of CSS (or other content or code) from other websites to your own site (unless you’re licensed to) as in my understanding that is a violation of copyright.

You could instead use the stylesheet provided with the Observable Inspector by putting this in the <head> of your html:

<link href="https://cdn.jsdelivr.net/npm/@observablehq/inspector@3/dist/inspector.css" rel="stylesheet"/>

This is only a subset of the styles used on observablehq.com, but it should be enough to get you started.

1 Like

Yeah, I opted not to when I saw the Copyright in the header. Nice to have this as an option. Ta.

1 Like

Most of Observable’s styles come from libraries: About 80% are from Tachyons, some are from CodeMirror, ReactCrop and others, and only a small percentage are actual custom classes and rules.

2 Likes