Placing plotly figure in marimo ui tab raises react error in browser console

[mrdobalina2k]

Describe the bug

In my app, I have multiple tabs. Some contain figures made with plotly. I've noticed that an error is raised in the console when this is the case. Something like this error is raised (in firefox):

13:54:54.416 Uncaught (in promise) Error: Resize must be passed a displayed plot div element.
    r http://127.0.0.1:2719/assets/react-plotly-BiOjhVSh.js:1
    resize http://127.0.0.1:2719/assets/react-plotly-BiOjhVSh.js:1
    resizeHandler http://127.0.0.1:2719/assets/react-plotly-BiOjhVSh.js:1
    value http://127.0.0.1:2719/assets/react-plotly-BiOjhVSh.js:1
    p http://127.0.0.1:2719/assets/react-plotly-BiOjhVSh.js:1
    promise callback*value http://127.0.0.1:2719/assets/react-plotly-BiOjhVSh.js:1
    value http://127.0.0.1:2719/assets/react-plotly-BiOjhVSh.js:1
    Pc http://127.0.0.1:2719/assets/index-CR8Z2sIQ.js:31
    Sc http://127.0.0.1:2719/assets/index-CR8Z2sIQ.js:31
    xc http://127.0.0.1:2719/assets/index-CR8Z2sIQ.js:31
    Cu http://127.0.0.1:2719/assets/index-CR8Z2sIQ.js:31
    Cu http://127.0.0.1:2719/assets/index-CR8Z2sIQ.js:31
    lu http://127.0.0.1:2719/assets/index-CR8Z2sIQ.js:31
    w http://127.0.0.1:2719/assets/index-CR8Z2sIQ.js:22
    E http://127.0.0.1:2719/assets/index-CR8Z2sIQ.js:22
    EventHandlerNonNull* http://127.0.0.1:2719/assets/index-CR8Z2sIQ.js:22
    <anonymous> http://127.0.0.1:2719/assets/index-CR8Z2sIQ.js:22
react-plotly-BiOjhVSh.js:1:758745

Environment

{ "marimo": "0.10.2", "OS": "Windows", "OS Version": "11", "Processor": "Intel64 Family 6 Model 126 Stepping 5, GenuineIntel", "Python Version": "3.12.2", "Binaries": { "Browser": "129.0.6668.60", "Node": "v20.14.0" }, "Dependencies": { "click": "8.1.7", "docutils": "0.20.1", "itsdangerous": "2.2.0", "jedi": "0.19.1", "markdown": "3.6", "narwhals": "1.14.0", "packaging": "24.0", "psutil": "5.9.8", "pygments": "2.17.2", "pymdown-extensions": "10.12", "pyyaml": "6.0.1", "ruff": "0.5.2", "starlette": "0.37.2", "tomlkit": "0.12.4", "typing-extensions": "4.12.2", "uvicorn": "0.29.0", "websockets": "11.0.3" }, "Optional Dependencies": { "pandas": "2.2.2" } }

Code to reproduce

This causes the error to show in the console log.

import marimo

__generated_with = "0.10.2"
app = marimo.App(width="medium")


@app.cell
def _():
    import marimo as mo
    import plotly.io as pio
    import plotly.graph_objects as go

    return go, mo, pio


@app.cell
def _(go, mo):
    s=mo.ui.plotly(go.Figure(go.Scatter(x=[1,2,3], y=[1,2,3])))
    return (s,)


@app.cell
def _(mo, s):
    mo.ui.tabs({"tab": s})
    return


if __name__ == "__main__":
    app.run()

[mscolnick]

this might be an issue on https://github.com/plotly/react-plotly.js/. it may not be a common use-case for them, but it seems to fail when plotly is conditionally rendered and resized (like in an accordion)

[mscolnick]

@mrdobalina2k - plotly released 6.0. curious if this is still an issue for you?

[mrdobalina2k]

I havent looked, since it was purely a browser error in the console and not an actual error that did anything. I will look later today