REACT error when using data_editor (st.data_editor()) and other challenges associated witht this widget

Hello!

Sorry for the long post. I have developed a dashboard to analyze some media expense variables and their corresponding effect on sales. One section of the dashboard deals with the simulation of media effects based on changing the expense of any of the media variables. For this part of the project, I have used the st.data_editor().

Initially I had a st.data_editor() widget with the values of the expense of each media channel per week and their corresponding effect on sales. I also included a plotly graph below de data_editor, showing the expense in one y-axis and the effect on sales in a second y-axis while the x-axis represented the date in weeks.

I placed the data editor widget inside a streamlit form so that I could make all changes required to the expense columns and refresh the calculations for the effects in one shot by clicking on the ‘Submit’ button. I noticed that although the graph would update, the values for the effects in the data editor remained the same. I decided to move the effects columns to a different widget and used the st.dataframe() for this in a separate column, next to the data editor. Althought visually not ideal, this worked. At this point I had the data editor widget inside a form with only the expense columns, a dataframe widget with the effects columns right next to the data editor in a separate column, and a plotly graph below both tables with the expense and effect per week.

However, last Thursday night I left everything working and on Friday morning, when I refreshed the dashboard got the following REACT related error, which I have no clue what it means and can´t find anything online about it and how it related to Streamlit:

Error: Minified React error #185; visit Minified React error #185 – React for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at rc (http://localhost:8501/static/js/main.1661a802.js:2:2270081)
at ns (http://localhost:8501/static/js/main.1661a802.js:2:2235374)
at http://localhost:8501/static/js/4253.ffc51ffe.chunk.js:2:148947
at http://localhost:8501/static/js/4253.ffc51ffe.chunk.js:2:278168
at http://localhost:8501/static/js/4253.ffc51ffe.chunk.js:2:221213
at http://localhost:8501/static/js/4253.ffc51ffe.chunk.js:2:221428
at http://localhost:8501/static/js/4253.ffc51ffe.chunk.js:2:217543
at http://localhost:8501/static/js/4253.ffc51ffe.chunk.js:2:217818
at ol (http://localhost:8501/static/js/main.1661a802.js:2:2260597)
at yl (http://localhost:8501/static/js/main.1661a802.js:2:

I started to simplify the code and eventually removed the streamlit form used to update the data editor and now it seems to be working again, but this is not what I want. I would prefer to have the data editor inside a form.

On a somewhat separate issue, I am also finding myself having trouble performing a ‘reset all columns’ in the data editor, meaning, going back to the original expense values. In fact, I have tried to debug this issue by printing the values of the original dataframe (which is a parameter of the st.data_editor()) immediately before executing the data editor, and it seems that the data editor does not take the original dataframe as parameter… let me show what Í mean by including the following code:

st.dataframe(df_sim_output) # Already updated dataframe with the original values from session state

de_df_sim_output = st.data_editor(
                    data = df_sim_output, # This parameter, which should be taking the df above, seems to be taking something else
                    hide_index=True,
                    use_container_width=True,
                    column_config=col_config,
                    column_order=[date_col.title()] + ['Tv', 'Radio', 'Press'],
                    key='de_df_sim', 
                    num_rows='fixed',
                    disabled=(col for col in df_sim_output.columns.to_list() if 'Total Effect' in col or col == date_col.title())
                    ) 

In the code above, st.dataframe(df_sim_output) shows the original expense values of the dataframe after clicking on a ‘reset all’ buttom, while the de_df_sim_out data_editor shows the expense values used in the previous step before clicking the reset buttom… how can this be if the df_sim_output immediately before executing de_df_sim shows the right values? Why is the data editor widget not taking the df_sim_output parameter correctly, and, more importantly, why am I getting that weird REACT error shown above when putting the data editor inside the streamlit form?

I am running this locally.
Streamlit version: 1.32
Python version: 3.12.0

Regarding the minified React error:

Streamlit version 1.32.0 introduced an updrade for dataframes that resolved several issues, including ones like you’ve mentioned here. There is also a patch out now, so I would do the following:

  1. First double-check if the error occurs with version 1.32.2.
  2. If you still get a minified React, then the best thing to do is submit a bug report on GitHub. Try to provide the smallest (but complete) amount of code to show the issue. We’ll need an executable code example, everything including import streamlit as st and some example data so we can run it. Historically, this type of bug can be difficult to track down since the exact screen size comes into play. A screen recording is very helpful and so is any information about the pixel size of the screen along with OS, browser, etc.

Regarding the resetting of a data editor

Please can you show more code? I’m not sure what or where your “Rest all” button is. Here’s one trick you can use to reset a data editor.

Thank you for the reply! I have updated to streamlit 1.32.2. I’ll try to recreate the error by adding a form and hopefully it won’t happen again. In the meantime, I tried creating two keys for the data editor as mentioned in the link provided, and that worked… well, only once… I added a ‘reset all’ button and it worked the first time I clicked on it, but if I make changes to the data editor’s dataframe and try to reset all again, then it does not do it, the values stay the same meaning the reset all button has no effect. I have deleted the session state keys for both versions of the data editor and even deleted any dataframes resulting from running the code, essentially attempting to replicate the original state of the page when first clicked on… yet the values are not reset. I will try a few more things but it sure isn’t that straight forward as I would have liked it… wish me luck… if I can´t get it to work, I will try to make a simpler example of what I have and post here…

For the dataframe editor, each reset will need to introduce a new key. You can either create a function to toggle back and forth between two keys or you can create a key that includes some kind of incrementation ("my_key_1", "my_key_2", "my_key_3", …).

Hello! I already tried the two key solution earlier today but it did not work for me… I will try the incremental option… Also, I will work on a practical example to better showcase my dificulties with the data editor. Thank you for your prompt response!

1 Like

Today I got additional errors, now also while using the st.dataframe() widget. Weird thing is that coworkers that have done a pull on the repo just like me, do not have the error, this on a very similar corporate laptop. This is “good” because it seems the problem is related to my laptop, yet, why could it be causing this issue??? The error is the following:

Error: Minified React error #185; visit Minified React error #185 – React for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

at rc (http://localhost:8501/static/js/main.d0867666.js:2:2270081)
at ns (http://localhost:8501/static/js/main.d0867666.js:2:2235374)
at http://localhost:8501/static/js/4253.ffc51ffe.chunk.js:2:148947
at http://localhost:8501/static/js/4253.ffc51ffe.chunk.js:2:278168
at http://localhost:8501/static/js/4253.ffc51ffe.chunk.js:2:221213
at http://localhost:8501/static/js/4253.ffc51ffe.chunk.js:2:221428
at http://localhost:8501/static/js/4253.ffc51ffe.chunk.js:2:217543
at http://localhost:8501/static/js/4253.ffc51ffe.chunk.js:2:217818
at ol (http://localhost:8501/static/js/main.d0867666.js:2:2260597)
at yl (http://localhost:8501/sta

Perhaps this warrants it own new post…

The minified react error will likely need to be reported on GitHub as an issue. Your exact device, browser, and screen size will be important to reproduce the error along with a code snippet and Streamlit version, which should be 1.32.2 per the discussion above. If you can get a screen recording if how the your triggers, that would help, too.