victoryhb / streamlit-option-menu

streamlit-option-menu is a simple Streamlit component that allows users to select a single item from a list of options in a menu.
MIT License
631 stars 73 forks source link

Trouble loading the streamlit_option_menu component #23

Open wraza2k9 opened 2 years ago

wraza2k9 commented 2 years ago

I am running an app on Steamlit cloud. Sometimes I receive the following error:

Your app is having trouble loading the streamlit_option_menu.option_menu component.

(The app is attempting to load the component from ****, and hasn't received its "streamlit:componentReady" message.)

If this is a development build, have you started the dev server?
If this is a release build, have you compiled the frontend?
ya55en commented 2 years ago

Same issue here, never happens on a development server, only on production deploys, and right after the deploy. It seems that some time later it starts working normally.

Versions on my setup:

$ pip list | grep streamlit
streamlit             1.12.2
streamlit-option-menu 0.3.2
ya55en commented 2 years ago

I have found a solution for my case -- described here. HTH.

wraza2k9 commented 2 years ago

I have found a solution for my case -- described here. HTH.

How this work on streamlit cloud, can you give an example?

ya55en commented 2 years ago

@wraza2k9: Not using Streamlit Cloud, so take my thoughts with a grain of salt. My guess is it won't be possible with a default deploy as it probably expects you to provide path to the application main page and then launches that. Deploying via a docker container on Kubenetes is what I do, having this clause at the end of the Dockerfile, to get the non-standard launcher executed:

CMD ["python3", "bin/run"]

You probably know this page -- if not, take a look, maybe you can find some alternative there that's going to work for your case. HTH 🤞

sultanarun commented 1 year ago

In nginx add mapping for component if it is missing. eg. location ^~ /static { proxy_pass http://127.0.0.1:8501/static/; } location ^~ /st-allowed-message-origins { proxy_pass http://127.0.0.1:8501/st-allowed-message-origins; } location ^~ /component { proxy_pass http://127.0.0.1:8501/component; } location ^~ /healthz { proxy_pass http://127.0.0.1:8501/healthz; } location ^~ /vendor { proxy_pass http://127.0.0.1:8501/vendor; }

TradingDominion commented 1 year ago

I have found a solution for my case -- described here. HTH.

I gave that a try and it seems to have fixed my issue as well. I was deploying a Streamlit app with the streamlit_option_menu to the Digital Ocean App Platform with a custom Dockerfile build. Implementing your hack seems to have done the trick of getting rid of that warning message on the initial startup. Thanks again.

djoguns commented 1 year ago

Found this somewhere. And it does the magic.

Add this in your code.

import mimetypes
mimetypes.add_type('application/javascript', '.js')
mimetypes.add_type('text/css', '.css')
EGLl-99 commented 1 year ago

Found this somewhere. And it does the magic.

Add this in your code.

import mimetypes
mimetypes.add_type('application/javascript', '.js')
mimetypes.add_type('text/css', '.css')

Excuse me, could you be a little more specific?

djoguns commented 1 year ago

Add the code snippet to the beginning of the body of your code to resolve the issue. I can't remember the source. But it solved my problem when I had similar issue.