# Can a notebook be 'too big'?

**URL:** <https://talk.observablehq.com/t/can-a-notebook-be-too-big/2143>\
**Category:** Help\
**Created:** [July 11, 2019, 11:26pm UTC](https://talk.observablehq.com/t/can-a-notebook-be-too-big/2143 "2019-07-11T23:26:56Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [July 11, 2019, 11:26pm UTC](https://talk.observablehq.com/t/can-a-notebook-be-too-big/2143/1 "2019-07-11T23:26:56Z")

</div>

When I try to embed a cell from [a relatively ‘big’ notebook](https://observablehq.com/d/d1345cfb039d5b19) that relies heavily on [Jeremy’s inputs](https://observablehq.com/@jashkenas/inputs), I get the error:

```auto
viewof value = RuntimeError: select could not be resolved

```

Here’s an [example of the error in a page hosted on GitHub](https://aaronkyle.github.io/concept/ui-design/sandbox/observable_embed_timeout.html).

If I [strip away](https://observablehq.com/d/26adffc64c58d3fc) all the cells except for my desired dropdown, however, it works.

Here’s an [example of a working embed page hosted on GitHub](https://aaronkyle.github.io/concept/ui-design/sandbox/observable_embed_min.html)

Not always, but sometimes, the browser console will return an error message:

```auto
[Violation] 'requestAnimationFrame' handler took 63ms

```

Is it possible that the embed is failing because my notebook is too large?

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [July 11, 2019, 11:50pm UTC](https://talk.observablehq.com/t/can-a-notebook-be-too-big/2143/2 "2019-07-11T23:50:35Z")

</div>

I think you’re running into the issue with the v1 modules served by Observable’s API described in [these](https://talk.observablehq.com/t/runtime-and-dependencies/1953/6) [threads](https://talk.observablehq.com/t/embedding-viewof-error-radio-could-not-be-resolved/1964/2).

The recommended solution is to switch to using the V3 runtime. I think changing the script in your HTML file to the following should work (not tested!):

```auto
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import notebook from "https://api.observablehq.com/d/d1345cfb039d5b19.js?v=3";
const renders = {
  "viewof value": "#labels",
};

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]);
  }
});

```

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [July 12, 2019, 12:05am UTC](https://talk.observablehq.com/t/can-a-notebook-be-too-big/2143/3 "2019-07-12T00:05:26Z")

</div>

Thanks Bryan. Unfortunately it still doesn’t work. That is, the rendered error message disappeared, but now the console returns:

```auto
Uncaught
observable_embed_timeout.html:26 
 ReferenceError: define is not defined
    at observable_embed_timeout.html:26

```

(So maybe it did work, but now there’s another error in my notebook that I need to sort out)?

Regarding the runtime version - I am surprised that the `?v=3` doesn’t refer to notebook version. Isn’t the runtime already defined as v4 here:  
`https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js`

… I had also tried changing the `@4` to `@3` when I was messing around, but went with v4 per Jeremy’s [very well elaborated guide on this topic](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks).

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [July 12, 2019, 12:59am UTC](https://talk.observablehq.com/t/can-a-notebook-be-too-big/2143/4 "2019-07-12T00:59:33Z")

</div>

Ah, my bad, I screwed up the code! Change `define` to `notebook`:

```html
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import notebook from "https://api.observablehq.com/d/d1345cfb039d5b19.js?v=3";
const renders = {
  "viewof value": "#labels",
};

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

const runtime = new Runtime();
const main = runtime.module(notebook, name => {
  if (renders[name]) {
    return new Inspector(renders[name]);
  }
});

```

> [@aaronkyle](#):
>
> Regarding the runtime version - I am surprised that the `?v=3` doesn’t refer to notebook version. Isn’t the runtime already defined as v4 here:

You were importing the Observable runtime library v4 correctly, but you needed to add `?v=3` to the import statement for your own notebook.

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [July 12, 2019, 1:03am UTC](https://talk.observablehq.com/t/can-a-notebook-be-too-big/2143/5 "2019-07-12T01:03:40Z")

</div>

Got it! 🙂 Thank you.

I got it in a slightly different way, following Jeremy’s example:

```auto

      import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
      import notebook from "https://api.observablehq.com/d/d1345cfb039d5b19.js?v=3";
      
      new Runtime().module(notebook, name => {
  if (name === "viewof value") {
    return new Inspector(document.querySelector("#labels"));
  }
});

```

… but I’ll switch over the your solution to allow me to define multiple cells.

Thanks for this!