dcc.Store("local") cause "error loading dependencies" but not dcc.Store("memory")

Hello everyone,

I have got a strange behaviour with the dcc.Store component.
Adding a “local” storage avoid my app to load while with a “memory” storage, everything is fine.

The dcc.Store component generates two errors in dash-renderer.dev.js when “storage_type” is set to “local”:

I can’t figure out why I have this error, anyone having faced the same issue or having any idea on what’s going on ? here is my layout:

app.layout = html.Div([

    dcc.Store(id='store_bt_data', storage_type='local'),

    html.Div(id='page_header', children=[

        html.Div(id='page_header_column1',
                 style={'display': 'inline-block', 'width': '50%'},
                 children=[
                     html.H1('Try different Backtest parameters setter')
                 ]),

        html.Div(id='page_header_column2',
                 style={'display': 'inline-block', 'width': '50%'},
                 children=[

                     html.Button('add backtest', id='add_bt'),

                     html.Div(id='bt_creation_options', style={'display': 'none'}, children=[
                         dcc.Dropdown(
                             id='strategy_selection',
                             options=[
                                 {'value': 'gna', 'label': 'gna'},
                                 {'value': 'gnou', 'label': 'gnou'}
                             ],
                             value=[],
                         ),
                         html.Button('validé', id='validation_btn')

                     ])
                 ]),

        html.Div(id='display_stored_data'),

    ]),

    html.Div(id='display_callbacks_success'),

    html.Br(),

    dcc.Tabs(id="tabs_vertical", value='tab_0', vertical=True,
             colors={'border': '#d6d6d6', 'primary': '#FE8000', 'background': '#f9f9f9'},
             style=vertical_tabs_styles),

])
1 Like

I encountered this error as well. Occurs for both session and local storage. Decided to table it as I had other issues that came up when using local and session. For now, using memory storage.

If you inspect your browser localStorage, you’ll see that the “store_bt_data” key at page load is undefined because it hasn’t been set. The component attempts to parse this as a string “undefined” which is not valid JSON. JSON.parse() triggers the exception you’re seeing in the browser.

in Store.react.js:

JSON.parse(this._storage.getItem(key));

Possible solution could be to just modify lines 91 and 143 to revert to a default value which is valid JSON. For example:

JSON.parse(this._storage.getItem(key) || "null");

@Philippe ping

2 Likes

thanks brad, I’m new to web development, I didn’t had the reflex to check my web browser storage…

JSON.parse(this._storage.getItem(key) || “null”);

Thanks, need to add a test and this is the probable solution. https://github.com/plotly/dash-core-components/issues/456

just to add that when using dcc.store in local or in memory, I can’t recover my data stored after page reload as shown by the images below.

My local.storage in the web browser:
store_bt_data_ctrl_shift_i

and my callback trigged by the creation of the button that correspond to its input during page load:


Note the value of the dcc.store component (stored_data).

I’m currently using those version of dash dependencies
dash==0.36.0
dash-core-components==0.43.0
dash-html-components==0.13.5
dash-renderer==0.17.0

Thanks for taking care of us

I’ve encountered the same issue. What’s weird is that it works on my Brave browser but not on Chrome.

Any idea when the solution will be implemented?

@mdylan2 In the short term, you could get by installing from my remote branch, which should fix this bug. Code is forked from dcc 0.45.0

pip install git+ssh://git@github.com/bcliang/dash-core-components.git@fix-localstorage-undefined

You are an absolute legend! Thank you so much.