React error when running component with material-ui in Jupyter

[stevenheidel]

Bug description

When I try to create a button with material-ui/core it comes out blank and an error is printed in the console:
Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

The link points to 3 possible causes:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

To reproduce

Run the following Jupyter cell:

import json
import idom_jupyter
import idom

material_ui = idom.install("@material-ui/core", fallback="loading...")

@idom.component
def ViewButtonEvents():
    event, set_event = idom.hooks.use_state(None)

    return idom.html.div(
        material_ui.Button(
            {
                "color": "primary",
                "variant": "contained",
                "onClick": lambda event: set_event(event),
            },
            "Click Me!",
        ),
        idom.html.pre(json.dumps(event, indent=2)),
    )

ViewButtonEvents()

Expected behavior

Expected to see a material-ui button

Additional context

It works fine with the victory example, I see the expected bar chart.

Versions:

• jupyter 1.0.0
• idom 0.22.5
• idom-jupyter 0.5.1

[stevenheidel]

Looks like the same bug as: #307 - I will try running it outside a notebook

[stevenheidel]

The same issue occurs from just using idom.run outside of a notebook

[rmorshea]

I'm able to reproduce the problem with Jupyter using Binder and created an issue in idom-jupyter: reactive-python/reactpy-jupyter#13

The fact this still doesn't work with idom.run is much stranger though as I'm not able to reproduce it. My best guess is to try and run idom restore and try again? Otherwise, I'd be happy to hop on a call to try and fix this when you have the time.

[stevenheidel]

Running idom restore and then idom.run again worked! Thanks - I will close this issue and follow the jupyter one instead.

[rafaellichen]

I am still seeing the issue. What do I need to configure in JS side to make it work? Everything works fine as long as I don't use hook functions. The idom libraries I am using: idom_jupyter (0.5.2), idom (0.23.1). Thanks.
Installation command for line !idom install: '['/usr/local/bin/npm', 'install', 'idom-client-react@file:packages/idom-client-react', 'react@^16.13.1', 'react-dom@^16.13.1', '@rit-git/ipylabeler']'; it's weird to me that it's trying to install react v16 while I specified v17 in the package.json.

In .ipynb file on notebook:

import idom
import idom_jupyter
!idom restore
!idom install <package name>
------------------------------------
ipylib = idom.Module(<package name>)
@idom.component
def widget():
    return ipylib.example()
widget()

package.json

{
    "name": "...",
    "version": "0.0.1",
    "description": "",
    "main": "dist/index.js",
    "module": "dist/index.modern.js",
    "source": "src/index.js",
    "scripts": {
        "build": "microbundle-crl --compress --format modern,cjs",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "repository": {
        "type": "git",
        "url": "..."
    },
    "author": "",
    "license": "ISC",
    "bugs": {
        "url": "..."
    },
    "homepage": "...",
    "devDependencies": {
        "microbundle-crl": "^0.13.11"
    },
    "dependencies": {
        "@blueprintjs/core": "^3.47.0",
        "@blueprintjs/popover2": "^0.11.1",
        "react": "^17.0.2"
    },
    "files": [
        "dist"
    ]
}

[rmorshea]

@rafaellichen there's an unreleased, but upcoming change to idom-jupyter that will remove the need to perform a build step (which historically has been the source of a lot of problems). You can try out these changes in Binder here. Give this code sample a try there:

import json
import idom
import idom_jupyter

mui = idom.web.module_from_template("react", "@material-ui/core", fallback="⌛")
Slider = idom.web.export(mui, "Slider")

@idom.component
def ViewSliderEvents():
    (event, value), set_data = idom.hooks.use_state((None, 50))

    return idom.html.div(
        Slider(
            {
                "color": "primary" if value < 50 else "secondary",
                "step": 10,
                "min": 0,
                "max": 100,
                "defaultValue": 50,
                "valueLabelDisplay": "auto",
                "onChange": lambda event, value: set_data([event, value]),
            }
        ),
        idom.html.pre(json.dumps([event, value], indent=2)),
    )

ViewSliderEvents()

It should look something like:

Let me know if you see any issues there.

[rafaellichen]

Thank you @rmorshea for the help: #321 (comment)
I tested it out with idom-0.23.1, idom-jupyter-0.5.2 as that's the current dependency relationship.
The error I got from notebook:

AttributeError                            Traceback (most recent call last)
/var/folders/b4/8vnmsd6x36g2t5wzk5sd44200000gn/T/ipykernel_40275/3988990647.py in <module>
      3 import idom_jupyter
      4 
----> 5 mui = idom.web.module_from_template("react", "@material-ui/core", fallback="⌛")
      6 Slider = idom.web.export(mui, "Slider")
      7 
AttributeError: module 'idom' has no attribute 'web'

If I upgrade idom to latest version, I see this error in terminal: idom-jupyter 0.5.2 requires idom<0.24,>=0.23, but you have idom 0.31.0 which is incompatible.
And this error appears in notebook:

---------------------------------------------------------------------------
ImportError                               Traceback (most recent call last)
/var/folders/b4/8vnmsd6x36g2t5wzk5sd44200000gn/T/ipykernel_40287/3988990647.py in <module>
      1 import json
      2 import idom
----> 3 import idom_jupyter
      4 
      5 mui = idom.web.module_from_template("react", "@material-ui/core", fallback="⌛")
/Library/Frameworks/Python.framework/Versions/3.9/lib/python3.9/site-packages/idom_jupyter/__init__.py in <module>
      3 
      4 from .widget import LayoutWidget, widgetize, run, set_jupyter_server_base_url
----> 5 from .ipython_extension import load_ipython_extension, unload_ipython_extension
      6 
      7 
/Library/Frameworks/Python.framework/Versions/3.9/lib/python3.9/site-packages/idom_jupyter/ipython_extension.py in <module>
      1 from functools import partial
      2 
----> 3 from idom.config import IDOM_CLIENT_IMPORT_SOURCE_URL
      4 from idom.core.component import AbstractComponent
      5 from IPython import get_ipython
ImportError: cannot import name 'IDOM_CLIENT_IMPORT_SOURCE_URL' from 'idom.config' (/Library/Frameworks/Python.framework/Versions/3.9/lib/python3.9/site-packages/idom/config.py)

[rmorshea]

@rafaellichen these changes are not released yet. You'll need to wait for the next release of idom-jupyter (probably this week). You can watch the repo to be notified when this release happens. The Binder link from the prior comment allows you to try it out now, even though it's not publicly available yet.

[rafaellichen]

@rmorshea thanks a lot. will wait for the next release. There is an error in the Binder example:
Could not resolve ref for gh:idom-team/idom-jupyter/upgrade-idom. Double check your URL. GitHub recently changed default branches from "master" to "main".

[rmorshea]

@rafaellichen try this link: https://mybinder.org/v2/gh/idom-team/idom-jupyter/main?filepath=notebooks%2Fintroduction.ipynb

[rmorshea]

@rafaellichen idom_jupyter version 0.6.0 has been released.