Embedding NGL 2.2.2 (via nglview) doesn't work anymore

[hainm]

It's hard to describe this issue but I will try my best.

Basically nglview uses this chunk of codes to generate the embeddable HTML: https://github.com/nglviewer/nglview/blob/98d7df9c5b2c035278724eacfb8184631c17015b/js/webpack.config.js#L48-L73

Something like below (in juypter notebook):

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

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

Upgrading from NGL 2.0.0-dev.39 to 2.2.2 make the embedding stop working. Below is the error:

I originally thought it was an issue with ipywidgets (jupyter-widgets/ipywidgets#3878), but I've tried to switch back to NGL 2.0.0-dev.39 with the same ipywidgets version and thing still works properly.

Can you please have a look.
Thanks

Hai

[hainm]

Oh, NGL 2.2.2 works fine with the jupyter notebook and lab (via nglview). It's just the HTML exporting doesn't work.

[hainm]

The latest "working" version is 2.1.1

[papillot]

@hainm a view of the line that fails within the source code would be very useful, or a way to reproduce it (a live version somewhere?)
Between 2.1.1 and 2.2.0 the bundling has changed. It's possible that's the cause of this bug

[hainm]

@hainm a view of the line that fails within the source code would be very useful, or a way to reproduce it (a live version somewhere?) Between 2.1.1 and 2.2.0 the bundling has changed. It's possible that's the cause of this bug

Dear @papillot

Please download (and rename) this file: https://github.com/jupyter-widgets/ipywidgets/files/13894919/index.html.txt

[ppillot]

Thanks for this. I did a first pass at investigating this last week. This is related to a change in the bundling system. The esm module that is loaded in this case, contains mangled names for Three.js dependency constants.
Mangling is fine when Three.js is part of the bundle (that is the case with the "regular" .min.js bundle). I am not sure it makes sense in the case of esm.

[hainm]

Dear @ppillot,

do you have a solution yet? If not, is it possible to follow the old way that works?

[papillot]

For various reasons, I haven't made any progress on this. I did investigate further and noticed that the previous code also had mangled identifiers.

[hainm]

thanks for the update.

[hainm]

It seems to me that upgrading to latest NGL (in this thread) will prevent nglview from being displayed in VSCode too:
microsoft/vscode-jupyter#15757 (comment)

User reported that nglview 3.0.8 works fine but the subsequent versions do not work. We introduce new NGL after 3.0.8