search

manzt / anywidget

reusable widgets made easy
https://anywidget.dev
MIT License
490 stars 39 forks source link

anywidget >=0.9.3 does not work on Jupyterlab 3.4.8 and notebook 6.4.12 #532

Closed superstar54 closed 6 months ago

superstar54 commented 7 months ago

I have a docker container which has the following packages:

jupyterlab                      3.4.8
jupyterlab-widgets              1.1.4
notebook                        6.4.12
ipywidgets                      7.7.4
ipywidgets-extended             1.1.1
jupyterlab-widgets              1.1.4

Then my weas-widget package does not work if anywidget >=0.9.3. I also tried the CounterWidget example from anywidget, it does not work too.

Here are the error messages from console:

2manager-base.js:296 Could not instantiate widget
(anonymous) @ manager-base.js:296
3manager-base.js:450 Error: Script error for "anywidget"
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js?v=d37b48bb2137faa0ab98157e240c084dd5b1b5e74911723aa1d1f04c928c2a03dedf922d049e4815f7e5a369faa2e6b6a1000aae958b7953b5cc60411154f593:168:17)
    at HTMLScriptElement.onScriptError (require.js?v=d37b48bb2137faa0ab98157e240c084dd5b1b5e74911723aa1d1f04c928c2a03dedf922d049e4815f7e5a369faa2e6b6a1000aae958b7953b5cc60411154f593:1735:36)
(anonymous) @ manager-base.js:450
8require.js?v=d37b48bb2137faa0ab98157e240c084dd5b1b5e74911723aa1d1f04c928c2a03dedf922d049e4815f7e5a369faa2e6b6a1000aae958b7953b5cc60411154f593:168 Uncaught (in promise) Error: Script error for "anywidget"
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js?v=d37b48bb2137faa0ab98157e240c084dd5b1b5e74911723aa1d1f04c928c2a03dedf922d049e4815f7e5a369faa2e6b6a1000aae958b7953b5cc60411154f593:168:17)
    at HTMLScriptElement.onScriptError (require.js?v=d37b48bb2137faa0ab98157e240c084dd5b1b5e74911723aa1d1f04c928c2a03dedf922d049e4815f7e5a369faa2e6b6a1000aae958b7953b5cc60411154f593:1735:36)
manager-base.js:296 Could not instantiate widget
(anonymous) @ manager-base.js:296
(anonymous) @ manager-base.js:45
(anonymous) @ manager-base.js:26
a @ manager-base.js:18
Promise.then (async)
l @ manager-base.js:19
(anonymous) @ manager-base.js:20
A @ manager-base.js:16
t._make_model @ manager-base.js:280
(anonymous) @ manager-base.js:269
(anonymous) @ manager-base.js:45
(anonymous) @ manager-base.js:26
(anonymous) @ manager-base.js:20
A @ manager-base.js:16
t.new_model @ manager-base.js:255
t.handle_comm_open @ manager-base.js:167
I @ underscore.js:762
(anonymous) @ underscore.js:775
(anonymous) @ underscore.js:122
(anonymous) @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:61573
Promise.then (async)
CommManager.comm_open @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:61569
i @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:2
Kernel._handle_iopub_message @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:63064
Kernel._finish_ws_message @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:62843
(anonymous) @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:62834
Promise.then (async)
Kernel._handle_ws_message @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:62834
i @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:2
utils.js:119 Error: Could not create a model.
    at utils.js:119:27
(anonymous) @ utils.js:119
Promise.catch (async)
t.handle_comm_open @ manager-base.js:172
I @ underscore.js:762
(anonymous) @ underscore.js:775
(anonymous) @ underscore.js:122
(anonymous) @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:61573
Promise.then (async)
CommManager.comm_open @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:61569
i @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:2
Kernel._handle_iopub_message @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:63064
Kernel._finish_ws_message @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:62843
(anonymous) @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:62834
Promise.then (async)
Kernel._handle_ws_message @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:62834
i @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:2
2main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:62835 Couldn't process kernel message Error: Script error for "anywidget"
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js?v=d37b48bb2137faa0ab98157e240c084dd5b1b5e74911723aa1d1f04c928c2a03dedf922d049e4815f7e5a369faa2e6b6a1000aae958b7953b5cc60411154f593:168:17)
    at HTMLScriptElement.onScriptError (require.js?v=d37b48bb2137faa0ab98157e240c084dd5b1b5e74911723aa1d1f04c928c2a03dedf922d049e4815f7e5a369faa2e6b6a1000aae958b7953b5cc60411154f593:1735:36)
(anonymous) @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:62835
Promise.catch (async)
Kernel._handle_ws_message @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:62835
i @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:2
Untitled.ipynb:1 Uncaught (in promise) Error: Script error for "anywidget"
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js?v=d37b48bb2137faa0ab98157e240c084dd5b1b5e74911723aa1d1f04c928c2a03dedf922d049e4815f7e5a369faa2e6b6a1000aae958b7953b5cc60411154f593:168:17)
    at HTMLScriptElement.onScriptError (require.js?v=d37b48bb2137faa0ab98157e240c084dd5b1b5e74911723aa1d1f04c928c2a03dedf922d049e4815f7e5a369faa2e6b6a1000aae958b7953b5cc60411154f593:1735:36)
Promise.then (async)
t.register_model @ manager-base.js:231
(anonymous) @ manager-base.js:271
(anonymous) @ manager-base.js:45
(anonymous) @ manager-base.js:26
(anonymous) @ manager-base.js:20
A @ manager-base.js:16
t.new_model @ manager-base.js:255
t.handle_comm_open @ manager-base.js:167
I @ underscore.js:762
(anonymous) @ underscore.js:775
(anonymous) @ underscore.js:122
(anonymous) @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:61573
Promise.then (async)
CommManager.comm_open @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:61569
i @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:2
Kernel._handle_iopub_message @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:63064
Kernel._finish_ws_message @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:62843
(anonymous) @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:62834
Promise.then (async)
Kernel._handle_ws_message @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:62834
i @ main.min.js?v=a4e125c812cb3975203ae429a5b40d180b59b8e4602fcc78390ef4f0dd4d14ac3559189f65f23cd50fd971f98f5842b7746f4182babd20b7ca84e52314bcd4ac:2
Untitled.ipynb:1 Uncaught (in promise) Error: Script error for "anywidget"
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js?v=d37b48bb2137faa0ab98157e240c084dd5b1b5e74911723aa1d1f04c928c2a03dedf922d049e4815f7e5a369faa2e6b6a1000aae958b7953b5cc60411154f593:168:17)
    at HTMLScriptElement.onScriptError (require.js?v=d37b48bb2137faa0ab98157e240c084dd5b1b5e74911723aa1d1f04c928c2a03dedf922d049e4815f7e5a369faa2e6b6a1000aae958b7953b5cc60411154f593:1735:36)
manzt commented 7 months ago

Thanks for opening, I'll try to have a look. I'm curious, are you able to get other (non-anywidget) Jupyter Widgets to work in this environment? For example ipyvega.

manzt commented 7 months ago

I am not able to reproduce:

requirements.txt

jupyterlab==3.4.8
jupyterlab-widgets==1.1.4
notebook==6.4.12
ipywidgets==7.7.4
ipywidgets-extended==1.1.1
jupyterlab-widgets==1.1.4
anywidget==0.9.4
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
jupyter lab
import anywidget
import traitlets

class CounterWidget(anywidget.AnyWidget):
    _esm = """
    function render({ model, el }) {
      let count = () => model.get("value");
      let btn = document.createElement("button");
      btn.innerHTML = `count is ${count()}`;
      btn.addEventListener("click", () => {
        model.set("value", count() + 1);
        model.save_changes();
      });
      model.on("change:value", () => {
        btn.innerHTML = `count is ${count()}`;
      });
      el.appendChild(btn);
    }
    export default { render };
    """
    value = traitlets.Int(0).tag(sync=True)

CounterWidget()
image

If you are able to provide a minimal reproducible example, hopefully we can sort it out.

Jhsmit commented 7 months ago

I'm encountering something similar in jupyterlite at: https://jhsmit.github.io/ipymolstar-demo/lab/index.html

336.0a90bd910629a565bb7e.js?v=0a90bd910629a565bb7e:1 Error: Module anywidget, version 0.9.7 is not registered, however,         0.9.2 is
    at f.loadClass (134.fe2572ece3b7955c89bb.js?v=fe2572ece3b7955c89bb:1:75054)
    at f.loadModelClass (336.0a90bd910629a565bb7e.js?v=0a90bd910629a565bb7e:1:10728)
    at f._make_model (336.0a90bd910629a565bb7e.js?v=0a90bd910629a565bb7e:1:7516)
    at f.new_model (336.0a90bd910629a565bb7e.js?v=0a90bd910629a565bb7e:1:5136)
    at f.handle_comm_open (336.0a90bd910629a565bb7e.js?v=0a90bd910629a565bb7e:1:3893)
    at _handleCommOpen (134.fe2572ece3b7955c89bb.js?v=fe2572ece3b7955c89bb:1:73470)
    at C._handleCommOpen (default.js:1119:19)
    at async C._handleMessage (default.js:1286:30)

when I add %pip install "anywidget==0.9.2" it fixes the issue

nanaeaubry commented 6 months ago

I am encountering an issue with rendering in Jupyter notebook 6.4.12 as well using anywidget = 0.9.7 It works fine in Jupyter Lab 4, Notebook 7, and vs code but not in older notebooks.

For the widget we are building we really need to to work in all of the environments.

Here is the error being shown in the console when calling the widget: image

manzt commented 6 months ago

I'm encountering something similar in jupyterlite at

This is related to #385. I'm not sure of a workaround since the version of anywidget installed when building the JupyterLite notebook needs to match that installed in the front end. This dependency management is handled by JupyterLite and not something we can handle directly. Ideally, JupyterLite would load the JS code from a CDN like the HTML version.

manzt commented 6 months ago

I am encountering an issue with rendering in Jupyter notebook 6.4.12 as well using anywidget = 0.9.7

Thanks for chiming in. Please provide a minimal reproducible environment and example. I am not able to reproduce with your current specification. I'd recommend creating a new Python environment.

nanaeaubry commented 6 months ago

@manzt I can send my project zipped up if that helps. I attempted with a fresh environment and installed only what was necessary but still see the same issue with the widget showing in labs + vscode but not for notebook.

arcgismapping-anywidgets - Copy.zip

I put only the necessary code in the widget so you can run the example notebook and see what is happening hopefully. Thank you

manzt commented 6 months ago

Hi all, thanks for your patience. I think this should be fixed for v6 notebooks in anywidget 0.9.10. Please give a try and feel free to reopen!

nanaeaubry commented 6 months ago

@manzt Great it works! Thank you for fixing that :)

superstar54 commented 5 months ago

Thanks! @manzt , the new version works!