How to install a nbextension with python and js components as a labextension

Question

I created a nb extension following this link!. The extension works correctly when ran from:

jupyter notebook

When I ran the same extension from

jupyter lab

The extension does not work and gives me an error:

Error displaying widget: model not found

Here is the error on console:

Could not instantiate widget
(anonymous) @ manager-base.js:273

09:27:26.891 default.js:127 Error: Module test_pp, semver range 1.2.0 is not registered as a widget module
    at WidgetManager.loadClass (manager.js:251)

test_pp is the extension module I am trying to run.

Following are the commands that make the extension work in notebok:

python setup.py build
pip install -e .
jupyter nbextension install --py test_pp
jupyter nbextension enable --py test_pp
jupyter notebook

Folder structure of notebook extension:

test_pp
  js
    lib
      embed.js
      extension.js
      index.js
      labplugin.js
      test_pp.js <------ The javascript part of extension
    node_modules
    package.json
    webpack.config.js
  test_pp
    static
    __init__.py
    _version.py
    test_pp.py <-------- The extension server side python

Looking thru several tutorials and blogs I found some commands that I could run that should make it but, but they did not help:

pip install ipywidgets
jupyter nbextension enable --py widgetsnbextension
jupyter labextension install @jupyter-widgets/jupyterlab-manager
cd jupyter_lab_src/test_pp
jupyter labextension install . <----- Fails, not a valid npm package

cd js <----- as that folder has package.json
jupyter labextension install . <---- installs successfully
jupyter lab

Open a notebook from lab, call the same commands that work in jupyter notebook:

from test_pp import test_pp
pp = test_pp.PostProcessor()
pp.initWidget()
data = 1
pp.set_data(data)
pp

Gives the error I described above. Ran a command to see the extensions:

(base) C:\data\OnScale_Jupyter\jupyterlab\test_pp>jupyter labextension list
JupyterLab v1.1.3
Known labextensions:
   app dir: c:\users\anils\miniconda3\share\jupyter\lab
        @jupyter-widgets/jupyterlab-manager v1.0.2 enabled  ok
        test_pp v0.1.0 enabled  ok* <----- why is there a star

   local extensions:
        test_pp: C:\data\OnScale_Jupyter\jupyterlab\test_pp\js

I see an error on the conda command console as well:

[W 10:22:31.781 LabApp] Failed to fetch package metadata for 'test_pp': <HTTPError 404: 'Not Found'>

I believe, in essence, I am unsure of how to launch a nbextension as a labextension? Any help would be appreciated?

Check the javascript console output. "model not found" sometimes means that the version numbers for libraries you are asking for do not match the version numbers of installed libraries. See this patch to the jupyter widget cookiecutter for example that addresses a similar issue: https://github.com/jupyter-widgets/widget-cookiecutter/commit/f423c91ab33322af0dba10586ecbf1d9e0fd8cb9 — Aaron Watters, Sep 16 '19 at 14:54

score 2 · Answer 1 · edited Jul 03 '21 at 01:08

Previously, I had the same issue. Here is what I did.

First, I installed the nbextension using the command in conda prompt. (https://jupyter-contrib-nbextensions.readthedocs.io/en/latest/install.html)

Then I enabled hinterland in nbextension in jupyternotebook. But still, it doesn't work in jupyter lab.

Then I followed instructions mentioned in this link: https://jupyterlab.readthedocs.io/en/stable/user/extensions.html#id14

installed nodejs using the below command:

conda install -c conda-forge nodejs
Then I rebuild my jupyterlab using the command:

jupyter lab build

Then I could see docstring and other autofill extension working in jupyterlab, as in this image.

How to install a nbextension with python and js components as a labextension

1 Answers1