Not working in VS Code

[MarcSkovMadsen]

THIS IS A COPY OF https://github.com/holoviz/panel/issues/2145

OS: Windows Python: 3.8 Panel: current master jupyter_bokeh: 3.0.0 notebook: 6.3.0

I can see that the current Panel MASTER branch does not work in VS Code via jupyter_bokeh.

Steps

python -m venv .venv
source .venv/Scripts/activate
pip install git+https://github.com/holoviz/panel.git
pip install jupyter_bokeh

In the Jupyter interactive notebook run (select code and click SHIFT+ENTER).

import panel as pn
pn.extension(comms='vscode')
pn.pane.Markdown("Hello")

and see the error

Error

Error: Module @bokeh/jupyter_bokeh, semver range ^3.0.0 is not registered as a widget module

Screenshot

[MarcSkovMadsen]

UPDATE: downgrading does not solve the problem. See below comments.

I can see that running pip install jupyter_bokeh==2.0.0 solves the problem.

So some how/ some where I guess VS code is running on jupyterlab 2.x ??

[MarcSkovMadsen]

It's funny because it seems my version of jupyter lab is 3.0.12.

[MarcSkovMadsen]

I can see that the comms after downgrading do not work as nothing happens when I click the button.

[bryevdv]

@MarcSkovMadsen Right, extension version 3.0 exists because it is known and established that the 2.0 version does not work with jupyter-lab 3.0. We were made abundantly an d continuously aware of this over the course of several months, so there is no need to re-tread that.

As @philippjfr noted elsewhere, it seems we may be forced to publish NPM versions of the extensions after all, in order to support VScode, which is mightily annoying.

[philippjfr]

@bryevdv Is there much difficulty involved in publishing to npm? We don't necessarily have to advertise it or document it I believe since I think VSCode will automatically try to pull in the extension from npm.

[bryevdv]

It's just one more thing to worry about. I'd feel better when/if this repo is automated CI

[MarcSkovMadsen]

@MarcSkovMadsen Right, extension version 3.0 exists because it is known and established that the 2.0 version does not work with jupyter-lab 3.0. We were made abundantly an d continuously aware of this over the course of several months, so there is no need to re-tread that.

Thanks for your comment @bryevdv . I'm sorry but I don't have the context for understanding the comment. I'm not sure what you are trying to say here?

As @philippjfr noted elsewhere, it seems we may be forced to publish NPM versions of the extensions after all, in order to support VScode, which is mightily annoying.

As I understand this comment you recognize that VS Code is not working with version 3.0 of this package?

[bryevdv]

I'm not sure what you are trying to say here?

I'm saying that pointing out that the combination of jlab 3.x and jupyter_bokeh 2.x do not function together ("comms after downgrading do not work", which has nothing to do with vscode) is very much redundant and unnecessary at this point.

As I understand this comment you recognize that VS Code is not working with version 3.0 of this package?

I don't use VScode for anything except an editor, and I don't really use Jupyter at all either, so I will certainly take your word for it.

[philippjfr]

@bryevdv I'd be happy to take a stab at automation. If I could get 20 minutes of your time, maybe on Friday I'll try to set that up on GH Actions. Are the PyPI, conda and npm tokens already set up as Bokeh Org secrets?

[bryevdv]

Not in this repo but I will add them

[philippjfr]

Not sure if it's worth it (or potentially a security risk) but on HoloViz I've just set them up at the org level.

[MarcSkovMadsen]

FYI. I'm working on enabling Panel users to explore the example and gallery notebooks on Binder. And I have installed VS Code there as well. My aim is to show how powerful a combination Panel and VS Code can be. Especially with the --autoreload. But for now it would not work with the versions 3.0 of jupyter lab.

https://user-images.githubusercontent.com/42288570/115116153-7911ff00-9f98-11eb-97bd-8228ae1ac840.mp4

And I would also like to be able to offer the powerful combination of Panel and VS Code on a Jupyter Hub at work :-)

[philippjfr]

That's on me. Will work on that tomorrow.

[MarcSkovMadsen]

Any news on this?

[philippjfr]

Yes, I just released 3.0.2 to PyPI and NPM with the needed fixes. Should work now.

[MarcSkovMadsen]

From my initial experiments its still not working. I will continue some other time.

[MarcSkovMadsen]

I started with a fresh python environment instead of upgrading an existing. That worked.

https://user-images.githubusercontent.com/42288570/120533827-72710700-c3e1-11eb-8ff0-82caf97d42f5.mp4

I close this one.

Notes from Test

$ "C:\Python38\python.exe" -m venv .venv
$ source .venv/Scripts/activate
$ pip install -r requirements.txt
Collecting panel==0.11.3
  Using cached panel-0.11.3-py2.py3-none-any.whl (9.0 MB)
Collecting jupyter_bokeh==3.0.2
  Downloading jupyter_bokeh-3.0.2-py3-none-any.whl (1.4 MB)
     |████████████████████████████████| 1.4 MB 2.2 MB/s
Collecting jupyterlab
  Using cached jupyterlab-3.0.16-py3-none-any.whl (8.2 MB)
Collecting voila
  Downloading voila-0.2.10-py3-none-any.whl (1.6 MB)
     |████████████████████████████████| 1.6 MB 6.4 MB/s

import panel as pn
pn.extension(comms="vscode")

widget = pn.widgets.FloatSlider(start=0.0, end=10.0, value=2.0, step=0.1)
widget

pn.Column(widget, widget.param.value)

Thanks @philippjfr. This is so great to get working again. Will boost my productivity and help showcase how great Panel works...also in VS Code.

https://user-images.githubusercontent.com/42288570/120533805-6be28f80-c3e1-11eb-9e51-45cf60836971.mp4

[xareelee]

Hi @MarcSkovMadsen

I'm also trying to use Panel in VSCode, but it failed to render. Could you provide a minimum starter project for panel or a dependency list?

My env is:

macOS 13.3.1 VSCode 1.77.3 poetry 1.4.2 python 3.11.3 panel 0.14.4 jupyter-bokeh 2.0.4 jupyterlab 2.3.2

I've tried your code in my VSCode, and it renders nothing:

I really have no idea about this.

[FlorentF9]

I faced exactly the same issue as @xareelee (no output rendering inside vscode, but working in browser jupyter-lab for instance ; using all the latest versions of panel, jupyter_bokeh at the time of my writing). For me, the problem was due to the BokehJS library not being loaded. I found it by looking at the logs in devtools (Ctrl+Shift+P > Toggle Developer Tools), it was showing warning messages:

Bokeh: BokehJS was loaded multiple times but one version failed to initialize.

and

Panel: ERROR: Unable to run Panel because Bokeh or Panel library is missing

Solution was to run following line:

import bokeh.io
bokeh.io.output_notebook()

It prints "BokehJS 3.3.2 successfully loaded." and after that, panel widgets work!

[bryevdv]

For the record bokeh.io.output_notebook() is the expected Bokeh way to load BokehJS and make it ready to use in notebooks. I don't actually know anything about pn.extension at all. Looking back, perhaps this issue should go in a Holoviz/Panel issue tracker? cc @philippjfr