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

[rednag]

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.

[Goyo]

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

[rednag]

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

[mleeee]

@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!