Unable to display Text and HTML widgets

JupyterLab
1

Hello,

I’m trying to display Text and/or HTML widgets using the code from the example page:

import ipywidgets as widgets

widgets.Text(
    value='Hello World',
    placeholder='Type something',
    description='String:',
    disabled=False   
)

However, nothing is displayed and I receive the followings errors in my Chrome console:

manager-base.js:300 Uncaught (in promise) Error: Cannot find model module @jupyter-widgets/controls@2.0.0, TextStyleModel
    at c.<anonymous> (manager-base.js:300:35)
    at manager-base.js:45:23
    at Object.next (manager-base.js:26:53)
    at s (manager-base.js:17:58)
(anonymous) @ manager-base.js:300
(anonymous) @ manager-base.js:45
(anonymous) @ manager-base.js:26
s @ manager-base.js:17
Promise.then (async)
(anonymous) @ extension.js:138
(anonymous) @ extension.js:168
OutputArea.append_mime_type @ outputarea.js:710
OutputArea.append_execute_result @ outputarea.js:493
OutputArea.append_output @ outputarea.js:325
OutputArea.handle_output @ outputarea.js:256
output @ codecell.js:399
Kernel._handle_output_message @ kernel.js:1199
i @ jquery.min.js:2
Kernel._handle_iopub_message @ kernel.js:1239
Kernel._finish_ws_message @ kernel.js:1018
(anonymous) @ kernel.js:1009
Promise.then (async)
Kernel._handle_ws_message @ kernel.js:1009
i @ jquery.min.js:2

I’m not sure if it’s related but I also noticed this earlier in the log:

manager-base.js:365 Failed to fetch ipywidgets through the "jupyter.widget.control" comm channel, fallback to fetching individual model state. Reason: Control comm was closed too early
(anonymous) @ manager-base.js:365
(anonymous) @ manager-base.js:45
(anonymous) @ manager-base.js:26
a @ manager-base.js:18
Promise.then (async)
l @ manager-base.js:19
s @ manager-base.js:17
Promise.then (async)
l @ manager-base.js:19
(anonymous) @ manager-base.js:20
A @ manager-base.js:16
t._loadFromKernel @ manager-base.js:326
c @ manager.js:78
d @ extension.js:46
h @ extension.js:61
(anonymous) @ extension.js:192

Other widgets like Button, Dropdown, and SelectMultiple seem to be working fine. Any suggestions?

2

The code you show has no way of handling and displaying the output. In essence you are just invoking an object to be used elsewhere in conjunction with output display manager. Often the snippets on the example page are meant to be used in a larger context. You tagged this JupyterLab and I’ll let you know that ipywidgets and JupyterLab working together is much more strict in some ways than the older Jupyter notebook interface. This has lead to more robust ipywidgets but has made a lot of older code and approaches not work.
Is anything showing in the ‘log’ console?
I’d suggest looking around for more current, complete examples there widgets like this are connected to out/widgets.Output() and explicitly use something like display(out). Then try substituting in your widget.

3

Don’t worry about this.

manager-base.js:300 Uncaught (in promise) Error: Cannot find model module @jupyter-widgets/controls@2.0.0, TextStyleModel

It’s possible ipywidgets and jupyterlab_widgets are not in sync. Looking at the output of pip list and jupyter labextension list would help provide some more starting points for inquiry.

Usually things are pretty smooth, but it’s a bit rocky right now, and probably some more releases are coming today: probably just pip install --upgrade ipywidgets jupyterlab_widgets (or equivalent conda or whatever).

Another approach is to pre-solve and manage virtual environments with a tool like pip-tools or conda-lock, so that the version are tightly pinned.

1 Like
4

Upgrading the widgets via pip fixed the issue! I could have sworn I tried that yesterday but maybe I got caught between releases. Thanks for your help!

5

Sorry; I should have tagged this as Jupyter Notebook. I’ve never gotten widgets working correctly in JupyterLab so I gave up on that. The same code is now working after updating the widget libraries:

image

6

Glad you sorted it out. The advice about being aware of hooking it to output will eventually help you if you keep working with ipywidgets and make more complicated implementations.

Yes, for a while that was an issue. It’s been fixed recently. In fact, I’d suggest it is better to work there with ipywidgets because the strictness makes for code that is more likely to work directly in Voila. This may soon become more important as the newer single document-centric offering of what is now known as the classical Jupyter notebook will be built on JupyterLab components in the next iteration of the newer single document-centric offering (see here), and I suspect along with that will make things more in line with how JupyterLab and Voila presently handle ipywidgets. In other words, your ipywidgets code stands a better chance of working still in a few months if you are moving towards the more current standards.
Another thing to point out is that now ipywidgets even works in JupyterLite which opens up many more options because you don’t necessarily need a typical, old-style full Python kernel.

2 Likes