Streamlit-bridge seems unresponsive in Streamlit cloud

[maxuser74]

Hello, even if it seems i could import streamlit-bridge in Streamlit cloud application, it keeps me giving error "Uncaught ReferenceError: stBridges is not defined" Locally it functions without problems Any idea ?

[binh-vu]

Can you share some code to help reproduce the problem on my side?

Without it, I guess the error you had is in the frontend, right? My code try to set the variable stBridges to the window variable (to make it global) so that we can call it from difference places. So I guess the problem is that this component was inside multiple iframe - see this file

[maxuser74]

Hello and thanks for the reply. I have cut down the code for simplicity and tried to reproduce the error. The following sample code isn't functioning in Streamlit Cloud but it is locally:

import streamlit as st
from st_bridge import bridge, html

st.set_page_config(
    page_title="Python Chess Explorer",
    layout="wide"
)

data = bridge("my-bridge", default="")

st.markdown("""
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">""",
            unsafe_allow_html=True)

html("""
 <button type="button" class="btn btn-primary" onClick="stBridges.send('my-bridge', 
 'prev')"> Prev </button>
 <button type="button" class="btn btn-primary" onClick="stBridges.send('my-bridge', 
 'next')">Next  </button>

""")

if data:
    st.text(data)

This is the browser (Chrome) error:

Uncaught ReferenceError: stBridges is not defined at HTMLButtonElement.onclick

[kyleliang919]

I hit similar issue when hosting on huggingface space, locally everything works perfectly, but once uploaded it hits this issue:

Your app is having trouble loading the st_bridge.bridge.bridge component.

If this is an installed component that works locally, the app may be having trouble accessing the component frontend assets due to network latency or proxy settings in your app deployment.

For more troubleshooting help, please see the [Streamlit Component docs](https://docs.streamlit.io/develop/concepts/custom-components) or visit our [forums](https://discuss.streamlit.io/).

The source code can be found here: https://huggingface.co/spaces/kz919/Can-You-Beat-405B-in-Chess/tree/main