It seems that material-ui cannot be used

[sylvoslee]

import dash
import dash_html_components as html
import json
import idom
from idom_dash import create_component, run_server

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

victory = idom.install("victory@35.4.0", fallback="loading...")
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)),
    )
        
@idom.component
def ClickCount():
    count, set_count = idom.hooks.use_state(0)
    return idom.html.button(
        {
            "id": "click-counter",
            "onClick": lambda event: set_count(count + 1)
        },
        count
    )
    
app.layout = html.Div(
    [
        html.H1("Simple Click Counter"),
        create_component(ClickCount),
        html.Br(),
        create_component(ViewButtonEvents),
    ]
)

if __name__ == "__main__":
    run_server(app, "127.0.0.1", 5000, debug=True)

[rmorshea]

@sylvoslee this is on Windows again right?

[rmorshea]

If this is on Windows, chances are this is probably an issue with IDOM in general.

[sylvoslee]

No, I also tried it on ubuntu

[rmorshea]

Hmm. Will try it out on my Ubuntu machine.

[rmorshea]

Any useful console logs?

[sylvoslee]

nothing

DEBUG:root:Starting server...
DEBUG:geventwebsocket.handler:Initializing WebSocket
DEBUG:geventwebsocket.handler:Validating WebSocket request
INFO:geventwebsocket.handler:10.146.136.68 - - [2021-02-20 15:53:38] "GET / HTTP/1.1" 200 790 0.007571
DEBUG:geventwebsocket.handler:Initializing WebSocket
DEBUG:geventwebsocket.handler:Validating WebSocket request
INFO:geventwebsocket.handler:10.146.136.68 - - [2021-02-20 15:53:39] "GET /_dash-layout HTTP/1.1" 200 534 0.000884
DEBUG:geventwebsocket.handler:Initializing WebSocket
DEBUG:geventwebsocket.handler:Validating WebSocket request
INFO:geventwebsocket.handler:10.146.136.68 - - [2021-02-20 15:53:39] "GET /_dash-dependencies HTTP/1.1" 200 110 0.000511
DEBUG:geventwebsocket.handler:Initializing WebSocket
DEBUG:geventwebsocket.handler:Validating WebSocket request
INFO:geventwebsocket.handler:10.146.136.68 - - [2021-02-20 15:53:39] "GET /_favicon.ico?v=1.19.0 HTTP/1.1" 200 9768 0.000573
DEBUG:geventwebsocket.handler:Initializing WebSocket
DEBUG:geventwebsocket.handler:Validating WebSocket request
DEBUG:geventwebsocket.handler:Attempting to upgrade connection
DEBUG:geventwebsocket.handler:WebSocket request accepted, switching protocols
DEBUG:asyncio:Using selector: EpollSelector
DEBUG:geventwebsocket.handler:Initializing WebSocket
DEBUG:geventwebsocket.handler:Validating WebSocket request
DEBUG:geventwebsocket.handler:Attempting to upgrade connection
DEBUG:geventwebsocket.handler:WebSocket request accepted, switching protocols
DEBUG:asyncio:Using selector: EpollSelector
DEBUG:geventwebsocket.handler:Initializing WebSocket
DEBUG:geventwebsocket.handler:Validating WebSocket request
DEBUG:geventwebsocket.handler:Attempting to upgrade connection
DEBUG:geventwebsocket.handler:WebSocket request accepted, switching protocols
DEBUG:asyncio:Using selector: EpollSelector

[rmorshea]

Looks like this is some mismatch with React:

dash_renderer.v1_9_0m1611082209.min.js:20 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.
    at Z (index-50b0b662.js:119)
    at Object.useContext (index-50b0b662.js:124)
    at useTheme (core.js:5696)
    at useStyles (core.js:6012)
    at WithStyles (core.js:6451)
    at we (react-dom@16.v1_9_0m1611082192.14.0.min.js:84)
    at nh (react-dom@16.v1_9_0m1611082192.14.0.min.js:96)
    at zj (react-dom@16.v1_9_0m1611082192.14.0.min.js:230)
    at Th (react-dom@16.v1_9_0m1611082192.14.0.min.js:152)
    at tj (react-dom@16.v1_9_0m1611082192.14.0.min.js:152)

[rmorshea]

Hmm... I think fixing this is gonna require reworking how IDOM's client loads up dynamically installed components. I'm pretty sure the problem is that IDOM is bundling its own version of React that is conflicting with the one used by Dash.

[rmorshea]

Thanks for reporting this.

[rmorshea]

Should be fixed now. Re-open if there's still an issue.