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

Custom Components
21

Hey all, :wave:

Wanted to update that 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. :tada:

Feel free to install the latest version and let us know what you think!

3 Likes
22

I had this issue with the component streamlit-plotly-events

The issue was caused by using nginx as a proxy with add_header X-Frame-Options DENY; which would (apparently?) prevent the necessary JS code from being loaded

My final nginx configuration, for reference:

# HTTP server configuration
server {
    listen 80;
    listen [::]:80;

    server_name SERVER_NAME;

    location / {
        return 301 https://$host$request_uri;
    }
}

# HTTPS server configuration
server {
    listen 443 ssl;
    listen [::]:443 ssl;

    server_name SERVER_NAME;

    # SSL certificate configuration
    ssl_certificate /etc/letsencrypt/live/SERVER_URL/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/SERVER_URL/privkey.pem;

    # verify chain of trust of OCSP response using Root CA and Intermediate certs
    ssl_trusted_certificate /etc/letsencrypt/live/SERVER_URL/chain.pem;

    # either generate a new dhparam file with (<!> this takes time <!>): openssl dhparam -out /etc/nginx/ssl/dhparam.pem 4096
    # or take the pre-computed file from: curl https://ssl-config.mozilla.org/ffdhe2048.txt > /etc/nginx/ssl/dhparam.pem
    ssl_dhparam /etc/nginx/ssl/dhparam.pem;

    # ssl parameters generated using https://ssl-config.mozilla.org/
    ssl_session_timeout 1d;
    ssl_session_cache shared:MozSSL:10m;  # about 40000 sessions
    ssl_session_tickets off;

    # intermediate configuration from https://ssl-config.mozilla.org/
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:DHE-RSA-CHACHA20-POLY1305;
    ssl_prefer_server_ciphers off;

    # added as per https://wiki.mozilla.org/Security/Server_Side_TLS
    ssl_ecdh_curve secp384r1:X25519:prime256v1;

    # HSTS (ngx_http_headers_module is required) (63072000 seconds)
    add_header Strict-Transport-Security "max-age=63072000; preload" always;

    # OCSP stapling
    ssl_stapling on;
    ssl_stapling_verify on;
    resolver 8.8.8.8 8.8.4.4 valid=300s;
    resolver_timeout 5s;

    # Reverse proxy settings
    # Set according to https://www.digitalocean.com/community/tutorials/understanding-nginx-http-proxying-load-balancing-buffering-and-caching#using-buffers-to-free-up-backend-servers
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    proxy_buffering on;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";

    location / {
        proxy_pass INTERNAL_URL;
    }
}
23

Hello! can you tell me the version of nginx and streamlit you are using? Because, even configuring the proxy and headers so that the components should be accepted, this error is occurring. Thanks in advance!