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

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?

Answer 1

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.