`__jupyter_widgets_base_version__` misread by `loadModelClass`

[ndmlny-qs]

Description

Reference manzt/anywidget#100 and bokeh/ipywidgets_bokeh#89 for a deeper discusion. Briefly; using panel to serve a notebook using anywidget causes ipywidgets to give the error Class null not found in module @jupyter-widgets/base@2.0.0

Reproduce

The environment can be reproduced with the following packages (conda yaml file below).

name: anywidget-error
channels:
  - conda-forge
dependencies:
  - anywidget==0.2.1
  - bokeh==2.4.3
  - ipywidgets==8.0.6
  - jupyterlab
  - panel==0.14.4

The code to generate the error in JupyterLab is

import anywidget
import traitlets

import panel as pn

pn.extension("ipywidgets")

class CounterWidget(anywidget.AnyWidget):
    _esm = """
    export function render(view) {
      let getCount = () => view.model.get("count");
      let button = document.createElement("button");
      button.classList.add("counter-button");
      button.innerHTML = `count is ${getCount()}`;
      button.addEventListener("click", () => {
        view.model.set("count", getCount() + 1);
        view.model.save_changes();
      });
      view.model.on("change:count", () => {
        button.innerHTML = `count is ${getCount()}`;
      });
      view.el.appendChild(button);
    }
    """
    _css="""
    .counter-button { background-color: #ea580c; }
    .counter-button:hover { background-color: #9a3412; }
    """
    count = traitlets.Int(0).tag(sync=True)

counter = CounterWidget()
pn.panel(counter).servable()

You can use the "render with panel" button in JupyterLab to see the error, or in your terminal save the notebook as <your favorite temp name>.ipynb and use panel to serve it with the following command.

panel serve zort.ipynb

Expected behavior

While you are in JupyterLab, you will see anywidget render the button counter. You can click on it and see it update the number of clicks it has registerd. If you try to serve it in panel or with the "render with panel" button, then you will get the lass null not found in module @jupyter-widgets/base@2.0.0 error in the dev console. The expected behavior is that the click counter will function like it does in JuypterLab, even if it is being served by panel/bokeh.

Context

• ipywidgets version
  • 8.0.6
• Operating System and version:
  • endeavourOS (linux)
• Browser and version:
  • Chrome 112.0.5615.121

Troubleshoot Output

Paste the output from running `jupyter troubleshoot` from the command line here.
You may want to sanitize the paths in the output.

$PATH:
        ~/conda/envs/anywidget-error/bin

sys.path:
        ~/conda/envs/anywidget-error/bin
        ~/conda/envs/anywidget-error/lib/python311.zip
        ~/conda/envs/anywidget-error/lib/python3.11
        ~/conda/envs/anywidget-error/lib/python3.11/lib-dynload
        ~/conda/envs/anywidget-error/lib/python3.11/site-packages

sys.executable:
        ~/conda/envs/anywidget-error/bin/python

sys.version:
        3.11.3 | packaged by conda-forge | (main, Apr  6 2023, 08:57:19) [GCC 11.3.0]

platform.platform():
        Linux-6.2.8-arch1-1-t2-x86_64-with-glibc2.37

which -a jupyter:
        ~/conda/envs/anywidget-error/bin/jupyter

pip list:
        Package                       Version
        ----------------------------- -----------
        aiofiles                      22.1.0
        aiosqlite                     0.18.0
        anyio                         3.6.2
        anywidget                     0.2.1
        argon2-cffi                   21.3.0
        argon2-cffi-bindings          21.2.0
        asttokens                     2.2.1
        attrs                         22.2.0
        Babel                         2.12.1
        backcall                      0.2.0
        backports.functools-lru-cache 1.6.4
        beautifulsoup4                4.12.2
        black                         23.3.0
        bleach                        6.0.0
        bokeh                         2.4.3
        brotlipy                      0.7.0
        certifi                       2022.12.7
        cffi                          1.15.1
        cfgv                          3.3.1
        charset-normalizer            3.1.0
        click                         8.1.3
        colorama                      0.4.6
        comm                          0.1.3
        coverage                      7.2.3
        cryptography                  40.0.2
        debugpy                       1.6.7
        decorator                     5.1.1
        defusedxml                    0.7.1
        distlib                       0.3.6
        entrypoints                   0.4
        exceptiongroup                1.1.1
        executing                     1.2.0
        fastjsonschema                2.16.3
        filelock                      3.11.0
        flake8                        6.0.0
        flit_core                     3.8.0
        greenlet                      2.0.2
        identify                      2.5.22
        idna                          3.4
        importlib-metadata            6.4.1
        importlib-resources           5.12.0
        iniconfig                     2.0.0
        ipdb                          0.13.13
        ipykernel                     6.22.0
        ipython                       8.12.0
        ipython-genutils              0.2.0
        ipywidgets                    8.0.6
        ipywidgets-bokeh              1.3.0
        isort                         5.12.0
        jedi                          0.18.2
        Jinja2                        3.1.2
        json5                         0.9.5
        jsonschema                    4.17.3
        jupyter_client                8.2.0
        jupyter_core                  5.3.0
        jupyter-events                0.6.3
        jupyter_server                2.5.0
        jupyter_server_fileid         0.9.0
        jupyter_server_terminals      0.4.4
        jupyter_server_ydoc           0.8.0
        jupyter-ydoc                  0.2.3
        jupyterlab                    3.6.3
        jupyterlab-code-formatter     1.6.0
        jupyterlab-katex              3.3.0
        jupyterlab-kernelspy          3.1.0
        jupyterlab-pygments           0.2.2
        jupyterlab_server             2.22.1
        jupyterlab-spellchecker       0.7.3
        jupyterlab-unfold             0.2.2
        jupyterlab-widgets            3.0.7
        Markdown                      3.4.3
        markdown-it-py                2.2.0
        MarkupSafe                    2.1.2
        matplotlib-inline             0.1.6
        mccabe                        0.7.0
        mdformat                      0.7.16
        mdformat_frontmatter          2.0.1
        mdformat_myst                 0.1.5
        mdformat_tables               0.4.1
        mdit-py-plugins               0.3.5
        mdurl                         0.1.0
        mistune                       2.0.5
        msgpack                       1.0.5
        mypy-extensions               1.0.0
        nbclassic                     0.5.5
        nbclient                      0.7.3
        nbconvert                     7.3.1
        nbformat                      5.8.0
        nest-asyncio                  1.5.6
        nodeenv                       1.7.0
        notebook                      6.5.4
        notebook_shim                 0.2.2
        numpy                         1.24.2
        packaging                     23.1
        pandocfilters                 1.5.0
        panel                         0.14.4
        param                         1.13.0
        parso                         0.8.3
        pathspec                      0.11.1
        pexpect                       4.8.0
        pickleshare                   0.7.5
        Pillow                        9.5.0
        pip                           23.1
        pkgutil_resolve_name          1.3.10
        platformdirs                  3.2.0
        pluggy                        1.0.0
        pre-commit                    3.2.2
        prometheus-client             0.16.0
        prompt-toolkit                3.0.38
        psutil                        5.9.5
        psygnal                       0.9.0
        ptyprocess                    0.7.0
        pure-eval                     0.2.2
        pycodestyle                   2.10.0
        pycparser                     2.21
        pyct                          0.4.6
        pyflakes                      3.0.1
        Pygments                      2.15.0
        pynvim                        0.4.3
        pyOpenSSL                     23.1.1
        pyrsistent                    0.19.3
        PySocks                       1.7.1
        pytest                        7.3.1
        pytest-cov                    4.0.0
        python-dateutil               2.8.2
        python-json-logger            2.0.7
        pytz                          2023.3
        pyviz-comms                   2.2.1
        PyYAML                        6.0
        pyzmq                         25.0.2
        requests                      2.28.2
        rfc3339-validator             0.1.4
        rfc3986-validator             0.1.1
        ruamel.yaml                   0.17.21
        ruamel.yaml.clib              0.2.7
        ruff                          0.0.261
        Send2Trash                    1.8.0
        setuptools                    67.6.1
        six                           1.16.0
        sniffio                       1.3.0
        soupsieve                     2.3.2.post1
        stack-data                    0.6.2
        terminado                     0.17.1
        tinycss2                      1.2.1
        toml                          0.10.2
        tomli                         2.0.1
        tornado                       6.2
        tqdm                          4.65.0
        traitlets                     5.9.0
        typing_extensions             4.5.0
        ukkonen                       1.0.1
        urllib3                       1.26.15
        virtualenv                    20.21.0
        watchfiles                    0.19.0
        wcwidth                       0.2.6
        webencodings                  0.5.1
        websocket-client              1.5.1
        wheel                         0.40.0
        widgetsnbextension            4.0.7
        wrapt                         1.15.0
        y-py                          0.5.9
        ypy-websocket                 0.8.2
        zipp                          3.15.0

Command Line Output

Paste the output from your command line running `jupyter lab` (or `jupyter notebook` if you use notebook) here, use `--debug` if possible.

No errors found in the terminal.

Browser Output

Paste the output from your browser Javascript console here.

Class null not found in module @jupyter-widgets/base@2.0.0

Please see the linked issues above for more context on the debugging effort used to find where the error originated.

If using JupyterLab

• JupyterLab version: 3.6.3

Installed Labextensions

Paste the output from your command line running `jupyter labextension list`.

JupyterLab v3.6.3
~/conda/envs/anywidget-error/share/jupyter/labextensions
        jupyterlab-unfold v0.2.2 enabled OK (python, jupyterlab-unfold)
        jupyterlab_pygments v0.2.2 enabled OK (python, jupyterlab_pygments)
        jupyterlab-kernelspy v3.1.0 enabled OK (python, jupyterlab_kernelspy)
        anywidget v0.2.1 enabled OK
        @jupyterlab/katex-extension v3.3.0 enabled OK (python, jupyterlab-katex)
        @pyviz/jupyterlab_pyviz v2.2.1 enabled OK (python, pyviz_comms)
        @ryantam626/jupyterlab_code_formatter v1.6.0 enabled OK (python, jupyterlab-code-formatter)
        @jupyter-widgets/jupyterlab-manager v5.0.7 enabled OK (python, jupyterlab_widgets)
        @ijmbarr/jupyterlab_spellchecker v0.7.3 enabled OK (python, jupyterlab-spellchecker)

[MarcSkovMadsen]

I would love this issue to be solved one day.

[jasongrout]

This code works for me with latest jupyterlab and ipywidgets (without panel):

import anywidget
import traitlets

class CounterWidget(anywidget.AnyWidget):
    _esm = """
    export function render(view) {
      let getCount = () => view.model.get("count");
      let button = document.createElement("button");
      button.classList.add("counter-button");
      button.innerHTML = `count is ${getCount()}`;
      button.addEventListener("click", () => {
        view.model.set("count", getCount() + 1);
        view.model.save_changes();
      });
      view.model.on("change:count", () => {
        button.innerHTML = `count is ${getCount()}`;
      });
      view.el.appendChild(button);
    }
    """
    _css="""
    .counter-button { background-color: #ea580c; }
    .counter-button:hover { background-color: #9a3412; }
    """
    count = traitlets.Int(0).tag(sync=True)

counter = CounterWidget()

This indicates to me this is likely an issue with Panel.

From the error, my hunch is that the default values for _model_module_version, _model_module, etc. are being transmitted along with the widget (see

ipywidgets/python/ipywidgets/ipywidgets/widgets/widget.py

Lines 467 to 478 in 1acf37f

	_model_name = Unicode('WidgetModel',
	help="Name of the model.", read_only=True).tag(sync=True)
	_model_module = Unicode('@jupyter-widgets/base',
	help="The namespace for the model.", read_only=True).tag(sync=True)
	_model_module_version = Unicode(__jupyter_widgets_base_version__,
	help="A semver requirement for namespace version containing the model.", read_only=True).tag(sync=True)
	_view_name = Unicode(None, allow_none=True,
	help="Name of the view.").tag(sync=True)
	_view_module = Unicode(None, allow_none=True,
	help="The namespace for the view.").tag(sync=True)
	_view_module_version = Unicode('',
	help="A semver requirement for the namespace version containing the view.").tag(sync=True)

for the default values).

To debug issues like this, I suggest looking at the messages on the kernel websocket. In ipywidgets, there are two messages - the comm_open message creating the model, and the display message creating the view. I'm not sure what Panel is doing in it's servable command, though. What I would be looking for is appropriate values for _model_module_version, _model_module, etc.

[jasongrout]

It looks like @philippjfr may have a fix at bokeh/ipywidgets_bokeh#97. I'll close this in favor of the work being done in bokeh/ipywidgets_bokeh#97, but if it turns out to be a problem in ipywidgets, please reopen.

[saulshanabrook]

I notice that I get the same issue if I use embed_minimal_html, for example:

import anywidget
import ipywidgets.embed
import traitlets


class CounterWidget(anywidget.AnyWidget):
    _esm = """
    export function render(view) {
      let getCount = () => view.model.get("count");
      let button = document.createElement("button");
      button.classList.add("counter-button");
      button.innerHTML = `count is ${getCount()}`;
      button.addEventListener("click", () => {
        view.model.set("count", getCount() + 1);
        view.model.save_changes();
      });
      view.model.on("change:count", () => {
        button.innerHTML = `count is ${getCount()}`;
      });
      view.el.appendChild(button);
    }
    """
    _css = """
    .counter-button { background-color: #ea580c; }
    .counter-button:hover { background-color: #9a3412; }
    """
    count = traitlets.Int(0).tag(sync=True)


counter = CounterWidget()

ipywidgets.embed.embed_minimal_html("tmp.html", views=[counter])

Failed to load view class 'null' from module '@jupyter-widgets/base'
Class null not found in module @jupyter-widgets/base@2.0.0

EDIT: Link to new upstream issue in anywidget created for this: manzt/anywidget#339