Voila-Vuetify template fails to load after the loading bar is displayed

[Jul3k]

When using the voila-vuetify template the widgets fail to load. An the the site gets stuck after the loading bar is displayed.

In Chrome the error message reads "Cannot read property 'kernelChanged' of undefined":

on Firefox the error message is "Uncaught (in promise) TypeError: e.sessionContext is undefined":

Loading the notebooks without specifying a template works without issues. The Notebook for testing just shows a simple ipyvuetify widget. The issue might be related to jupyter-flex uncaught exception #78. They recommend downgrading to a previous version of voila in the 0.2.X series. For me I could only get it working by downgrading to voila==0.1.24 and voial-vuetify==0.4.0
Here is a list of the installed package versions. I could reproduce this issue on three machines running Linux.

ipyvue==1.5.0
ipyvuetify==1.6.2
jupyter-client==6.1.12
jupyter-console==6.2.0
jupyter-core==4.7.1
jupyter-packaging==0.9.2
jupyter-server==1.6.4
jupyterlab-pygments==0.1.2
voila==0.2.9
voila-vuetify==0.5.1

I am not sure if this is an issue with voila or voila-vuetify, but since the error occures in voila.js I deceided to open the issue here.

[jtpio]

Thanks @Jul3k.

Would you be able to try with the latest 0.2.10 release of voila?

For me I could only get it working by downgrading to voila==0.1.24

Were you also able to check with 0.2.7?

[Jul3k]

@jtpio thank you for the recommendation. Installing the latest 0.2.10 shows the same issue like versions 0.2.9 and 0.2.8. Downgrading to 0.2.7 does indeed work, but I have to start the jupyter notebook server with --VoilaConfiguration.enable_nbextensions=True. I think it is the correct way to enable the extensions but unfortunately not documented in voila-vuetify. Otherwise the widgets don't load becuase jupyter-vue.js and jupyter-vuetify.js cannot be found.

[jtpio]

Thanks @Jul3k for checking.

There was a refactoring of the frontend that was shipped in 0.2.8, so it's very likely this is the reason the other templates are seeing this.

So looking at the code for voila vuetify, the WidgetManager is instantiated there: https://github.com/voila-dashboards/voila-vuetify/blob/9c0ead3855ef9223d160c60a4a5abfcb719b1af7/share/jupyter/nbconvert/templates/vuetify-base/util.js#L92

However the structure of the context is not the same between the template:

https://github.com/voila-dashboards/voila-vuetify/blob/9c0ead3855ef9223d160c60a4a5abfcb719b1af7/share/jupyter/nbconvert/templates/vuetify-base/util.js#L68-L82

And the one now in Voila master:

voila/share/jupyter/voila/templates/base/static/main.js

Lines 18 to 39 in 8dd5ee3

	const context = {
	sessionContext: {
	session: {
	kernel,
	kernelChanged: {
	connect: () => {}
	},
	},
	statusChanged: {
	connect: () => {}
	},
	kernelChanged: {
	connect: () => {}
	},
	connectionStatusChanged: {
	connect: () => {}
	},
	},
	saveState: {
	connect: () => {}
	},
	};

Not sure any of the classes from the Voila frontend were ever part of the public API, but it's a good sign that we should also be testing compatibility with downstream templates here in the voila repo.

Hopefully #846 will make the frontend more structured with properly defined APIs at the plugin level, so this should help detecting such issues.

[jtpio]

In the meantime, the simplest fix might be to update the vuetify template to use the new structure for the context object passed to the widget manager. And require voila>=0.2.8 when cutting a new release.

[maartenbreddels]

I guess voila-dashboards/voila-vuetify#44 is the fix

[Jul3k]

The fix mentioned by @jtpio, which is already implemented by voila-dashboards/voila-vuetify#44 in the meantime while I was looking into the issue solves the problem. Thank you!