Component having trouble loading inside EC2

[Lo_illo]

Hi,

I have built a streamlit app using a custom react component. I have deployed the app on AWS EC2 using a docker compose.

Although the app is running perfectly locally, the following warning appears in the EC2 :

It is persistent when I reload the page.

First I thought it was a connectivity issue between the app container and the node container but a wget from the streamlit app achieves to get a response :

I have read that it could be related to the streamlit version but I have tried multiple versions and the problem is still there. Now I’m using 1.25.0 with python 3.9.

Then, I considered it was a network latency problem and used the solution given is this thread ( Connection timed out - on high latency networks · Issue #2312 · streamlit/streamlit · GitHub ) and including it in the docker file of the streamlit app, before the run command. However, nothing has changed.

I am now out of ideas. Has anyone faced the same issue and has came out with a solution ?

Thanks in advance !

[dataprofessor]

Hi @Lo_illo

It seems to be a timeout on the component’s iframe as explaiend in the following related forum post:

Any ideas on "Your app is having trouble loading the st_aggrid.agGrid component"?

Yeah, this is a somewhat arbitrarily-chosen timeout. It measures the amount of time between a Component’s iframe being mounted and the component sending its “hello I’m ready to receive data” message back to Streamlit. We show this error message if that timeout is exceeded. The error message will disappear if the component eventually does finish loading. It sounds like the message never goes away for you, which may mean the component is throwing an error that’s preventing it from loading. If you…

Hope this helps!

[Lo_illo]

Hello @dataprofessor

Thank you for your reply.

As advised by @ti, I have looked at the error window and noticed no error in the console tab. However, in the network tab, the request sent for the component at URL http://front:3000/?streamlitUrl=<my_streamlit_app_url> has not been resolved.

Here is the request header :

Can the issue be related to that strict-origin-when-cross-origin strategy ? And if yes, is there a way to modify the referrer in streamlit ?

[Jessica_Smith]

Hey @Lo_illo,

Wanted to let you know the latest Streamlit version 1.32.2 is out and includes a significant improvement for custom components! The timeout warning was replaced with an element skeleton to improve the UX for slow-loading components, especially in some cloud-hosted platforms.

Feel free to install the latest version and let us know how it goes!