Support of JupyterLite?

[kolibril13]

I just tried using ipyreact in jupyterlite: https://jupyterlite.readthedocs.io/en/latest/_static/lab/ installation, import and definitions work fine, but displaying a widget causes error messages. Just out of curiosity: Would it be possible to make ipyreact widgets work in JupyterLite?

whole error message:

[Open Browser Console for more detailed log - Double click to close this message]
Failed to load model class 'ReactModel' from module '@widgetti/jupyter-react'
Error: No version of module @widgetti/jupyter-react is registered
    at f.loadClass (https://jupyterlite.readthedocs.io/en/latest/_static/extensions/@jupyter-widgets/jupyterlab-manager/static/134.40eaa5b8e976096d50b2.js?v=40eaa5b8e976096d50b2:1:74856)
    at f.loadModelClass (https://jupyterlite.readthedocs.io/en/latest/_static/extensions/@jupyter-widgets/jupyterlab-manager/static/150.b0e841b75317744a7595.js?v=b0e841b75317744a7595:1:10729)
    at f._make_model (https://jupyterlite.readthedocs.io/en/latest/_static/extensions/@jupyter-widgets/jupyterlab-manager/static/150.b0e841b75317744a7595.js?v=b0e841b75317744a7595:1:7517)
    at f.new_model (https://jupyterlite.readthedocs.io/en/latest/_static/extensions/@jupyter-widgets/jupyterlab-manager/static/150.b0e841b75317744a7595.js?v=b0e841b75317744a7595:1:5137)
    at f.handle_comm_open (https://jupyterlite.readthedocs.io/en/latest/_static/extensions/@jupyter-widgets/jupyterlab-manager/static/150.b0e841b75317744a7595.js?v=b0e841b75317744a7595:1:3894)
    at _handleCommOpen (https://jupyterlite.readthedocs.io/en/latest/_static/extensions/@jupyter-widgets/jupyterlab-manager/static/134.40eaa5b8e976096d50b2.js?v=40eaa5b8e976096d50b2:1:73393)
    at v._handleCommOpen (https://jupyterlite.readthedocs.io/en/latest/_static/build/6591.94ed352.js:1:28742)
    at async v._handleMessage (https://jupyterlite.readthedocs.io/en/latest/_static/build/6591.94ed352.js:1:30636)

[maartenbreddels]

This is not related to ipyreact per se. I think the idea is to build jupyter lite yourself from an environment that has ipyreact installed, so that it bundles the jupyter-ipyreact jupyterlab extension with it.

[maartenbreddels]

see https://jupyterlite.readthedocs.io/en/latest/howto/configure/simple_extensions.html

[kolibril13]

I just created https://github.com/Octoframes/ipyreact-jupyterlite with the jupyterlite page here: https://octoframes.github.io/ipyreact-jupyterlite/ My first attempt was to to put ipyreact into .jupyterlite/requirements.txt, https://github.com/Octoframes/ipyreact-jupyterlite/blob/main/.jupyterlite/requirements.txt#L5

and then installing it via pip on github actions https://github.com/Octoframes/ipyreact-jupyterlite/blob/61ee1a0ded0637054df72a8c68e09e8e353f3393/.github/workflows/JupyterLite.yml#L21 that was not causing any errors in the actions, but running a cell in JupyterLite now tells me: ModuleNotFoundError: No module named 'ipyreact'

[kolibril13]

see https://jupyterlite.readthedocs.io/en/latest/howto/configure/simple_extensions.html

Ok, I've just read this till the end and found the section:

and therefore added

%pip install ipyreact

Indeed, I don't get any error anymore, but instead the message Loading widget... , that never transforms into a widget.

[kolibril13]

Also, when I run the cell, I get the following log error:

%%react

import * as React from "react";

export default function MyButton() {
    return ( < button > X < /button>);
    }

[maartenbreddels]

in your requirements you have ipywidgets>=7.7,<8 but you will end in with the ipywidgets 8 package. This is triggering the error: https://jupyterlite.readthedocs.io/en/latest/howto/configure/simple_extensions.html#avoid-the-drift-of-versions-between-the-frontend-extension-and-the-python-package

If you unpin it, you will get 8, which should be fine.

[kolibril13]

Ohhh, that's perfect, thank you so much! your answers are way better than from any GPT model :)

It works now fine! 🎉 🎉 🎉

Should we add a JupyterLite build for this main repo as well?

[maartenbreddels]

Awesome 😍 We have it for https://github.com/widgetti/reacton, but it's slightly different since that uses conda-forge, which I don't feel like adding right now. But that would be great to have!

[maartenbreddels]

Should we add a JupyterLite build for this main repo as well?

Sounds good :)