Failed to display Jupyter Widget of type interactive.

[lonce]

I just can't seem to set up an environment that will work with ipywidgets. Errors are reminiscent of earlier bug reports (such as #1003), altho all the version numbers are higher:

python 3.6.3
jupyter_core 4.3.0
jupyter_client 5.1.0
ipykernel 4.6.1
ipython 6.2.1
notebook 5.1.0
ipywidgets 7.0.1
widgetsnbextension 3.0.3
nbformat 4.4.0

Then the simplest possible ipywidget attempt in the notebook:

import matplotlib.pyplot as plt
from ipywidgets import interact
#%matplotlib inline

plt.show()
def f(n):
# plt.plot([0,1,2],[0,1,n])
pass

interact(f,n=(0,10));

Produces the following error report in the output:

Failed to display Jupyter Widget of type interactive.
If you're reading this message in Jupyter Notebook or JupyterLab, it may mean that the widgets JavaScript is still loading. If this message persists, it likely means that the widgets JavaScript library is either not installed or not enabled. See the Jupyter Widgets Documentation for setup instructions.
If you're reading this message in another notebook frontend (for example, a static rendering on GitHub or NBViewer), it may mean that your frontend doesn't currently support widgets.

ipywidgets looks so cool! What do I need to do to get it working?
Thanks for your great work.

• lonce

[jasongrout]

Did you enable the widgets with jupyter nbextension enable --py --sys-prefix widgetsnbextension?

[lonce]

Hi Jason,
Yes, widgets are enabled, and I get the - Validating: 'OK' message when I do that. Still no love.
I get the same behaviour in Chrome and Firefox on my OSX Yosemite, 10.10.5 if that matters.
Thanks,

[pbugnion]

Thanks for raising this. I'm sure you have done this, but for reference, you need to refresh the browser tab containing the notebook (or restart your browser) after you have run jupyter nbextension enable --py --sys-prefix widgetsnbextension.

To diagnose this further, it would be useful to know the answer to:

• When you refresh the browser tab containing the notebook, you should get a message like Loading extension: jupyter-js-widgets/extension in the browser console. Do you see this message?

• Are you running jupyter in a virtual environment?

• How did you install ipywidgets?

• When you run jupyter --paths, it should print a section like:

data:
    /Users/pascal/Library/Jupyter
    /Users/pascal/.virtualenvs/full/share/jupyter
    /usr/local/share/jupyter
    /usr/share/jupyter

Each of these directories may contain an nbextension directory. Within these, there should be a directory called jupyter-js-widgets containing a file called extension.js. Does that exist?

[alexgm7]

Hi @pbugnion, I'm having the same issue trying to run the Map widget from ipyleaflet. I have this code:

from ipyleaflet import Map
Map(center=[13.8844, 100.6845], zoom=10)

And I get this:

Failed to display Jupyter Widget of type Map.
If you're reading this message in Jupyter Notebook or JupyterLab, it may mean that the widgets JavaScript is still loading. If this message persists, it likely means that the widgets JavaScript library is either not installed or not enabled. See the Jupyter Widgets Documentation for setup instructions.
If you're reading this message in another notebook frontend (for example, a static rendering on GitHub or NBViewer), it may mean that your frontend doesn't currently support widgets.

I can run Interactive widgets for matplotlib but not this one.
I have enabled the widgets with jupyter nbextension enable --py --sys-prefix widgetsnbextension.
Answering to your questions: No, I'm not using vitual enviroment; I tried installing ipywidgets with both pip and conda, but I think I already had them.
I get this when running jupyter nbextension list:

Known nbextensions:
  config dir: \Users\aleja\AppData\Roaming\SPB_16.6\.jupyter\nbconfig
    notebook section
      jupyter-js-widgets/extension enabled
      - Validating: ok
      widgets/notebook/js/extension enabled
      - Validating: problems found:
        - require?  X widgets/notebook/js/extension
  config dir: \Users\aleja\Anaconda3\etc\jupyter\nbconfig
    notebook section
      jupyter-js-widgets/extension enabled
      - Validating: ok
      jupyter-leaflet/extension enabled
      - Validating: ok

and this with jupyter --paths:

config:
    \Users\aleja\AppData\Roaming\SPB_16.6\.jupyter
    \Users\aleja\Anaconda3\etc\jupyter
    \ProgramData\jupyter
data:
    \Users\aleja\AppData\Roaming\jupyter
    \Users\aleja\Anaconda3\share\jupyter
    \ProgramData\jupyter
runtime:
    \Users\aleja\AppData\Roaming\jupyter\runtime

The nbextension directory exists in both first two data directories but only the second has the jupyter-js-widgets directory (with extension.js file). And the third directory doesn't seems to exist, I couldn't find it within the ProgramData directory.
And I get this when refreshing the browser tab:

I would really appreaciate if you could help me.
Thanks.

[jasongrout]

@jack167, what version of the notebook are you running?

Also, it looks like you have some extensions enabled at both the user and the environment level. What is in \Users\aleja\AppData\Roaming\jupyter\nbextensions?

[alexgm7]

@jasongrout I'm running version 4.4.1

And there's only a directory called nglview with some .min files. There isn't the jupyter-js-widgets directory in it.

[jasongrout]

@jack167 - if I were trying to track this down on your computer, I would do the following. The notebook extension system causes a lot of confusion, especially since you can have old versions of packages installed in multiple places that then mess things up.

1. I would delete the user configuration/data directories if you haven't done anything explicitly with them, i.e., delete \Users\aleja\AppData\Roaming\SPB_16.6\.jupyter\ and \Users\aleja\AppData\Roaming\jupyter (or perhaps move them somewhere else to make sure you have it backed up).
2. I would delete the sys-prefix config/data directories to get a clean slate: \Users\aleja\Anaconda3\etc\jupyter and \Users\aleja\Anaconda3\share\jupyter
3. I would install ipywidgets 7 cleanly again (you may need to uninstall ipywidgets to do this)
4. I would enable the widgets nbextension with jupyter nbextension enable --sys-prefix --py widgetsnbextension
5. Then cleanly install ipyleaflet (possibly uninstall first), then enable again with the --sys-prefix flag.

Then you should not have a user configuration or data directory, and everything should be installed in the Anaconda3\etc directories (i.e., the sys-prefix directories).

[alexgm7]

@jasongrout I followed the steps deleting all of the directories and I could only enable ipyleaflet but not the widgets nbextension. When I run jupyter nbextension enable --sys-prefix --py widgetsnbextension I'd get:

Enabling notebook extension jupyter-js-widgets/extension...
      - Validating: problems found:
        - require?  X jupyter-js-widgets/extension

And with jupyter nbextension list I was getting:

Known nbextensions:
  config dir: \Users\aleja\Anaconda3\etc\jupyter\nbconfig
    notebook section
      jupyter-js-widgets/extension enabled
      - Validating: problems found:
        - require?  X jupyter-js-widgets/extension
      jupyter-leaflet/extension enabled
      - Validating: ok

I tried installing it with both pip and conda but didn't seem to work.
Then I tried putting back the jupyter-js-widgets directory (that I previously deleted but kept as backup) back in \Users\aleja\Anaconda3\share\jupyter and that worked just fine. I'm running now both ipywidgets and ipyleaflet widgets. I ended up with this:

Known nbextensions:
  config dir: \Users\aleja\AppData\Roaming\SPB_16.6\.jupyter\nbconfig
    notebook section
      jupyter-js-widgets/extension enabled
      - Validating: ok
  config dir: \Users\aleja\Anaconda3\etc\jupyter\nbconfig
    notebook section
      jupyter-js-widgets/extension enabled
      - Validating: ok
      jupyter-leaflet/extension enabled
      - Validating: ok

I'm leaving this here in case anyone may find it helpful.
Thanks a lot.

[jasongrout]

Then I tried putting back the jupyter-js-widgets directory (that I previously deleted but kept as backup) back in \Users\aleja\Anaconda3\share\jupyter and that worked just fine.

You could also manually reinstall the javascript by doing jupyter nbextension install --py --sys-prefix widgetsnbextension, but copying the directory should work fine if it was indeed the right version of the javascript.

I'm glad everything works!

To prevent future problems, I would delete the configuration in \Users\aleja\AppData\Roaming\SPB_16.6\.jupyter\nbconfig and the associated extension directory in \Users\aleja\AppData\Roaming\jupyter - you can see above that this user-level extension is overriding the duplicate installation in the sys-prefix level.

[jasongrout]

@lonce - did you make progress as well?

[lonce]

Hi,

Also, it looks like you have some extensions enabled at both the user and the environment level.

This may have been my problem, too, but mucking around in the 10's of subdirectories where fault might lie didn't work. I took the over-kill approach, uninstalling reinstalling python and conda from scratch and now have things working. Now enjoying interaction ipywidgets.

Thanks

[jasongrout]

This may have been my problem, too, but mucking around in the 10's of subdirectories where fault might lie didn't work.

My takeaway is that the current jupyter notebook extension system is confusing and easy to get mixed up.

[jasongrout]

I'm glad you got it working! Closing as resolved.