Supports Custom Streamlit Components Consistently Fail to Load in IDX - Even with ngrok Tunneling
Bug: Streamlit Components Fail in IDX
Summary: Custom Streamlit components consistently fail to load in Project IDX, even w/ ngrok. Error: "app.[comp] from [ngrok_url] hasn't received Streamlit.setComponentReady()." Suggests IDX bug.
To Reproduce: 1. IDX. 2. Basic Streamlit (app.py) + React/Webpack component (frontend/). 3. Simple React comp: Streamlit.setComponentReady() on mount. 4. package.json: webpack serve, Webpack: streamlit external. 5. ngrok.yml: ports 3001, 8501. 6. devserver.sh: ngrok, URLs, start Streamlit. 7. ./build.sh. 8. Start: npm start, ngrok start --all, ./devserver.sh. 9. Access Streamlit.
Expected: Component loads.
Actual: Component fails. Error: "app.[comp] from [ngrok_url] hasn't received Streamlit.setComponentReady()."
Troubleshooting: 1. Minified comp. 2. Verified Streamlit.setComponentReady(). 3. Correct Webpack. 4. ngrok used. 5. Browsers. 6. No index.html. 7. Cleaned env. 8. Dev/prod. 9. Restarts.
Probable Cause: IDX's handling of component requests, even w/ ngrok. Internal proxy issue.
Impact: Impossible to dev/test Streamlit components in IDX.
Request: Investigate.
Code: Code in the env.
Info: Exhaustive troubleshooting done. Problem is in IDX.
Philippe Back
shared this idea
Thank you so much for taking the time to share your idea with us and for participating in our community.
Because we have officially announced the sunsetting of Firebase Studio and are currently focusing on the migration process, we are no longer accepting or implementing new feature requests for this product.
We appreciate your support and understanding as we transition to our next chapter.