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

blockhart · June 4, 2020, 9:08pm

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:

Bryan · June 4, 2020, 9:31pm

You are not calling output_notebook for a start:

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.

blockhart · June 4, 2020, 10:30pm

Thanks Bryan

With output_notebook:

The widgets render on occasion, but I usually have this problem. I guess my browser only sometimes loads bokeh-widgets-2.0.2.min.js, I don’t know why it would not load it. If you have any more ideas about what might be the problem please let me know.

Bryan · June 5, 2020, 2:05am

Can you see what happens in other browsers?

blockhart · June 5, 2020, 4:07am

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.

Bryan · June 5, 2020, 4:11am

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.

blockhart · June 5, 2020, 5:22am

Thanks a lot Bryan

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

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

p-himik · June 5, 2020, 5:46am

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

Bryan · June 5, 2020, 6:48am

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

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.

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

67743 - chromium - An open-source project to help move the web forward. - Monorail ↩︎
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. ↩︎

Bryan · June 5, 2020, 6:51am

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).

blockhart · June 5, 2020, 10:03pm

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!

Bryan · June 5, 2020, 10:05pm

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