After update to 1.33.0 loading tabs/cols sporadically ends up with blank page

The app I’ve been running runs locally with Python 3.10.12 and streamlit 1.33.0.

How I can reproduce bug

  • I click on a link on my landing page and it tries to load a new page.
  • It already shows the sidebar and loads the data from the database.
  • Then two tabs are initialized and the rendering of the first tab is started
  • It starts to create the layout with 3 columns and ends up with a blank page even without the previous shown sidebar.

here a short snippet

        ...
        data = pd.read_sql_query('SELECT Stonks FROM Data', con)

        tab1, tab2 = st.tabs(['Overview', 'Detailed'])
        with tab1:
            cols = st.columns(3, gap='large')
            with cols[0]:
                st.markdown("<h5 style='text-align: center; color: #48494B;'>Stonks</h4>", unsafe_allow_html=True)

There is no error triggered even when I surround it with a try except, therefore it is really hard to debug, but when I switch back to 1.26.0 which I’ve used before I dont ran into this problem.

Your snippet works for me. The problem must lie somewhere else.

Weird, since it occured with the update.

Now I’ve also tried all major versions in between 1.26.0 and 1.33.0 and everything >1.26.0 have that problem.

It seems that in 1.33.0 the whole page is reset at a certain point, because sporadically it loads the content and sometimes in between the rendering the page gets blanked.

edit:
The following error occurs sporadically when the page gets rendered blank. When it is rendered ok the error does not occur.

I assume it is somekind of concurrency or asynchronous problem since it occures 8 out of 10 times when refreshing the page.

websocket.onmessage @ main.7e6f4f72.js:2
main.7e6f4f72.js:2 Uncaught TypeError: Cannot read properties of null (reading 'label')
    at Jt (main.7e6f4f72.js:2:4165570)
    at wa (main.7e6f4f72.js:2:2238614)
    at wl (main.7e6f4f72.js:2:2295727)
    at zc (main.7e6f4f72.js:2:2284833)
    at Oc (main.7e6f4f72.js:2:2284761)
    at Mc (main.7e6f4f72.js:2:2284624)
    at cc (main.7e6f4f72.js:2:2281740)
    at Uo (main.7e6f4f72.js:2:2222335)
    at rc (main.7e6f4f72.js:2:2278827)
    at Object.enqueueSetState (main.7e6f4f72.js:2:2229353)
Jt @ main.7e6f4f72.js:2
wa @ main.7e6f4f72.js:2
wl @ main.7e6f4f72.js:2
zc @ main.7e6f4f72.js:2
Oc @ main.7e6f4f72.js:2
Mc @ main.7e6f4f72.js:2
cc @ main.7e6f4f72.js:2
Uo @ main.7e6f4f72.js:2
rc @ main.7e6f4f72.js:2
enqueueSetState @ main.7e6f4f72.js:2
M.setState @ main.7e6f4f72.js:2
(anonymous) @ main.7e6f4f72.js:2
setTimeout (async)
Cp.handleDeltaMsg @ main.7e6f4f72.js:2
delta @ main.7e6f4f72.js:2
(anonymous) @ main.7e6f4f72.js:2
Cp.handleMessage @ main.7e6f4f72.js:2
handleMessage @ main.7e6f4f72.js:2
await in handleMessage (async)
websocket.onmessage @ main.7e6f4f72.js:2

This is the callstack

@rednag I’m also having a very similar issue with my multi-page app, where one page with the tabs only shows this blank problem. I don’t see any error message in the backend side; only the JS console on my browser (Chrome) shows the similar TypeError:

Uncaught TypeError: Cannot read properties of undefined (reading ‘vertical’)
at Sa (main.eccc579f.js:2:4254265)
at wa (main.eccc579f.js:2:2254114)
at wl (main.eccc579f.js:2:2311227)
at zc (main.eccc579f.js:2:2300333)
at Oc (main.eccc579f.js:2:2300261)
at Mc (main.eccc579f.js:2:2300124)
at cc (main.eccc579f.js:2:2297240)
at Uo (main.eccc579f.js:2:2237835)
at rc (main.eccc579f.js:2:2294327)
at Object.enqueueSetState (main.eccc579f.js:2:2244853)

Did you have a chance to fix this error? Any comment would be so much helpful!

Still haven’t fixed the issue and I still think it is a streamlit problem probably based on some concurrency jobs or nested pages in the background.

What I’ve found out - the code runs w/o tabs, but when I introduce the tabs then I just get a blank page.

I tried all major versions between >1.26.0 and all have this problem. In 1.27.0 there were some bug fixes in st.tabs, probably here were the new bugs introduced!

Workaround - put the st.tabs in a st.columns then it works

cols = st.columns([0.999, 0.001])
with cols[0]:
    tab1, tab2, tab3 = st.tabs(['Tab1', 'Tab2', 'Tab3'])
    with tab1: