Embed doesn't work anymore? (e.g: Syncing error: no comm channel defined)

[hainm]

Hi there,

I am trying to embed nglview-js-widgets 3.1.0 in my application but getting below error:
https://www.npmjs.com/package/nglview-js-widgets

You could try to download index.html.txt (-> index.html) and open it to see the error message
index.html.txt

If I change the nglview-js-widgets version from 3.1.0 to 3.0.8 in the index.html, thing just work.

3.1.0 version works fine in the notebook and lab.

Do you have idea how to resolve this? Thanks.

[hainm]

Another way to reproduce is

pip install nglview==3.1.0 # ipywidgets 8, notebook 7

And in notebook

# 1st cell
import nglview as nv
view = nv.demo()
view

# 2nd cell
nv.write_html("index.html", view)
!open index.html

[hai-schrodinger]

Syncing error: no comm channel defined'

ipywidgets/packages/base/src/widget.ts

Lines 478 to 482 in b253179

	sync(method: string, model: WidgetModel, options: any = {}): any {
	// the typing is to return `any` since the super.sync method returns a JqXHR, but we just return false if there is an error.
	if (this.comm === undefined) {
	throw 'Syncing error: no comm channel defined';
	}

[hainm]

Seems like an issue with the NGL release instead: nglviewer/ngl#1014

[webridging]

When this issue occurs, you should use the Jupyter Lab from the mdtraj environment (the one where nglview is installed), rather than the one from the base environment.
(If you launch Jupyter from the base environment, the web page will show an error.)

The web page opened using the following method will not produce any errors:

In VS Code, as long as you select the correct kernel, there will be no problem either.