Widget not rendering on JupyterLab examples

Widget not rendering on JupyterLab when running main.py on examples/app and examples/notebook.

  1. Go to root folder after cloning GitHub - jupyterlab/jupyterlab: JupyterLab computational environment.
  2. Build examples folder after installing and building all node modules
  3. Go to examples/app, run python main,py , open notebook type and run

What I expect is:

  • Operating System and version: Linux Ubuntu 20.04
  • Browser and version: Chrome 94.0.4606.71
  • JupyterLab version: 3.1.18
  • Nodejs version: 16.10.0

Output from developer tools:

Access to font at 'about:blank' from origin 'http://localhost:8888' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
about:blank:1 Failed to load resource: net::ERR_FAILED
3 default.js:1027 Exception opening new comm
_handleCommOpen @ default.js:1027

Jupyter labextesnion list:

JupyterLab v3.1.18
/home/erkin98/miniconda3/envs/appshell/share/jupyter/labextensions
        jupyter-leaflet v0.14.0 enabled OK
        @jupyter-widgets/jupyterlab-manager v3.0.1 enabled OK (python, jupyterlab_widgets)

Other labextensions (built into JupyterLab)
   app dir: /home/erkin98/miniconda3/envs/appshell/share/jupyter/lab
        jupyterlab-plotly v5.3.1 enabled OK
        jupyterlab-system-monitor v0.7.0 enabled OK
        jupyterlab-topbar-extension v0.6.0 enabled OK
        plotlywidget v4.14.3 enabled OK

For proper support of outputs I would recommend to add respective extensions for output, jupyter-widgets and javascript support:

  • @jupyterlab/outputarea
  • @jupyter-widgets/jupyterlab-manager
  • @jupyterlab/javascript-extension

Other packages/extensions may be needed too.

How does a custom jupyter UI use @jupyterlab/outputarea?

There is a small self-contained example in JupyterLab repository: jupyterlab/packages/services/examples/typescript-browser-with-output at master · jupyterlab/jupyterlab · GitHub - is this what you are looking for?

Thank you, I’m not even sure, I’m really confused to be honest

My goal was to use ipython widgets in a custom ui, I was using the following for learning purposes on how to add them, since it was really small and seemed like a good learning tool

But I’m not able to get ipywidgets to work, I see an error about Exception opening new comm from default.js. I think it’s because I’m not loading the ipythonwidgets properly. Here seems to be a guide on how to load them onto your custom UI, but it leaves me with several questions:

  1. Is the problem with the simplest ui on the server-side?
  • Do I have to do something with federated_extensions on that file?
  • Should I be including nbextensions onto setup.py somewhere?
  1. Is the problem on the ui side?
  • I probably need to include ipywidgets as a script, but when I do, I get issues with require.js
    <script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="nbextensions/jupyter-js-widgets/extension" src="{{base_url}}nbextensions/jupyter-js-widgets/extension.js"></script>
  • Should it go on the webpack.js?
  1. Or is the problem on both sides?