Error: Model 'Div' does not exist. This could be due to a widget or a custom model not being registered before first usage

Hello,

Bokeh widgets including Div, PreText, and Paragraph are not rendering in a jupyter notebook in VS Code or a browser.

Example:

from bokeh.io import show
from bokeh.models import Div

div = Div(text="text")
show(div)

Stack traceback:

Error: Model 'Div' does not exist. This could be due to a widget or a custom model not being registered before first usage.
    at Object.s.Models (https://cdn.bokeh.org/bokeh/release/bokeh-2.0.2.min.js:163:190)
    at Function._instantiate_object (https://cdn.bokeh.org/bokeh/release/bokeh-2.0.2.min.js:162:5089)
    at Function._instantiate_references_json (https://cdn.bokeh.org/bokeh/release/bokeh-2.0.2.min.js:162:5239)
    at Function.from_json (https://cdn.bokeh.org/bokeh/release/bokeh-2.0.2.min.js:162:8384)
    at Object.t.embed_items_notebook (https://cdn.bokeh.org/bokeh/release/bokeh-2.0.2.min.js:555:1533)
    at embed_document (eval at runCodeHere (vscode-resource://file///Users/brandonlockhart/.vscode/extensions/ms-python.python-2020.5.80290/out/datascience-ui/notebook/vendors~nteract_transforms.bundle.js:2:11583), <anonymous>:6:20)
    at eval (eval at runCodeHere (vscode-resource://file///Users/brandonlockhart/.vscode/extensions/ms-python.python-2020.5.80290/out/datascience-ui/notebook/vendors~nteract_transforms.bundle.js:2:11583), <anonymous>:10:5)
    at eval (eval at runCodeHere (vscode-resource://file///Users/brandonlockhart/.vscode/extensions/ms-python.python-2020.5.80290/out/datascience-ui/notebook/vendors~nteract_transforms.bundle.js:2:11583), <anonymous>:26:3)
    at runCodeHere (vscode-resource://file///Users/brandonlockhart/.vscode/extensions/ms-python.python-2020.5.80290/out/datascience-ui/notebook/vendors~nteract_transforms.bundle.js:2:11583)
    at t.value (vscode-resource://file///Users/brandonlockhart/.vscode/extensions/ms-python.python-2020.5.80290/out/datascience-ui/notebook/vendors~nteract_transforms.bundle.js:2:12015)

Software version info:

• bokeh: 2.0.2
• python: 3.7.4
• jupyter: 1.0.0
• vscode: 1.45.1
• chrome: 83.0.4103.61
• OS: macos 10.15.5

Screenshot:

Screen Shot 2020-06-04 at 1 38 39 PM1049×296 50.9 KB

You are not calling output_notebook for a start:

Screen Shot 2020-06-04 at 2.28.44 PM914×424 35.4 KB

That said, things still work fine for me without output_notebook, they just cause the output to be a separate HTML file shown in a new tab (as expected).

The proximate cause of the error is that widget implementations are split in to a separate bokeh-widgets-2.0.2.min.js bundle, and your browser has not loaded this file. But Bokeh always automatically includes extra bundles when they are needed by default, so more information would be necessary to try and understand what is preventing that from happening in your specific situation.

Thanks Bryan

With output_notebook:

Screen Shot 2020-06-04 at 2.56.53 PM1049×414 57.5 KB

Screen Shot 2020-06-04 at 2.57.40 PM1091×206 15.6 KB

Can you see what happens in other browsers?

I tried using Safari version 13.1.1 and Firefox version 77.0.1 and am having the same problem. Rendering glyphs from bokeh.plotting always works though.

Any other messages on the JS console? Any information in the browser network debug pane? I’m afraid I’m somewhat at a loss. You could also try using inline resources instead of default loading from CDN.

Thanks a lot Bryan

Sorry I should have looked at this initially, but I think the problem is a CORS error:

Screen Shot 2020-06-04 at 9.38.55 PM1440×455 124 KB

I see there are browser plugins to get past this error, but I think there could be a problem with my jupyter config.

If I’m not mistaken, CORS error with a CDN sounds like a problem with the CDN.

We 100% set the header (permissively) on CDN if the SRI attrs (e.g. crossorigin="anonymous") are on the request:

Screen Shot 2020-06-04 at 11.42.56 PM1046×1362 151 KB

But what can has been observed is that if a browser first loads BokehJS without the SRI attributes (for any reason), then a subsequent load with them set can fail. This is due to a particular interpretation Chrome’s makes wrt SOP and caching that many people regard as a bug in Chrome. ^[1] I have not observed or heard of it anywhere but Chrome, though. ^[2]

There are some spots in the docs that failed to set the SRI hashes, so that made it too easy to trigger this situation for users that viewed the affected pages first. But as of the upcoming release, every place I can think of should be properly setting the SRI attributes, so someone would have to really go out of their way to have them loaded without.

TLDR; all I can suggest right now is to clear cache / force reload or use inline resources.

1. All the gory details for anyone that wants to see them:

   67743 - chromium - An open-source project to help move the web forward. - Monorail ↩︎

2. I guess it’s possible this is version-dependent. I definitely explicitly tried—but failed—to repro this scenario on FF and Safari. I could only make this happen on Chrome. ↩︎

I guess I should add: I am speculating that the above is what is going on in this particular situation. I can’t think of any other reason, because the only way I know that the header could be missing is that it is being loaded out of cache (without it having been set previously when it was put there).

Thanks a lot for the detailed information. It works in Chrome when I clear cache, but it’s not ideal having to do that frequently. I will keep looking into this issue. Thanks!

You should only have to do it once (unless you clear again and load the “bad” URLs first thing).