Widget not rendering on JupyterLab examples

[erkin98]

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

[krassowski]

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.

[delc]

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

[krassowski]

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?

[delc]

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?

2. 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?

3. Or is the problem on both sides?

[erkin98]

adding * @jupyter-widgets/jupyterlab-manager was solved my issue back to last year

[pplonski]

Hi @erkin98,

I have similar issue as yours. Where did you added @jupyter-widgets/jupyterlab-manager to solve the issue?

[erkin98]

Hi @pplonski
to package.json

[pplonski]

Thank you @erkin98 for your response.

1. I have added the @jupyter-widgets/jupyterlab-manager in examples/notebook with command jlpm add @jupyter-widgets/jupyterlab-manager.
2. Then I run build with jlpm run build:examples but I still cant see ipywidgets, just plain text.

In developer console, I get error default.js:1125 Exception opening new comm.

Maybe I need some changes in index.ts code?