Black Lives Matter. Please consider donating to Black Girls Code today.

ComputingAggregationsUpfront doesn't work well

In my environment (Firefox 57.0), the following code works well.
Error: component.type is undefined occurred by the sample code.

@app.callback(
    Output('intermediate-value', 'children'),
    [Input('dropdown', 'value')])
def clean_data(value):
     # an expensive query step
     cleaned_df = your_expensive_clean_or_compute_step(value)
     # a few filter steps that compute the data
     # as it's needed in the future callbacks
     df_1 = cleaned_df[cleaned_df == 'apples']
     df_2 = cleaned_df[cleaned_df == 'oranges']
     df_3 = cleaned_df[cleaned_df == 'figs']
     dic = {
         df_1: df_1.to_json(orient='split'),
         df_2: df_2.to_json(orient='split'),
         df_3: df_3.to_json(orient='split'),
     }
    return json.dumps(dic)

https://plot.ly/dash/sharing-data-between-callbacks

Can you provide some more context? It’s not clear what exactly your problem is. Possibly would help if you included the layout also.

I would really appreciate it if you could confirm.

import numpy as np
import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as dhc
import json
options = [
    {'label': '10', 'value': 10},
    {'label': '100', 'value': 100},
    {'label': '1000', 'value': 1000},
]
def gen_data(num):
    dat = pd.DataFrame({'idx': range(num)})
    dat['x'] = np.random.normal(size=num)
    return dat
app = dash.Dash()
app.layout = dhc.Div([
    dcc.Dropdown(
        id='input_num',
        options=options,
        value=1
    ),
    dhc.Div(id='output'),
    dhc.Div(id='intermediate', style={'display': 'none'}),
])
@app.callback(
    dash.dependencies.Output('intermediate', 'children'),
    [
        dash.dependencies.Input('input_num', 'value'),
    ],
)
def update_intermediate(input_num):
    print('update_intermediate')
    d1 = gen_data(int(input_num))
    d2 = gen_data(int(input_num))
    d3 = gen_data(int(input_num))
    dic = {
        'd1': d1.to_json(),
        'd2': d2.to_json(),
        'd3': d3.to_json(),
    }
    #return json.dumps(dic)
    return dic
@app.callback(
    dash.dependencies.Output('output', 'children'),
    [
        dash.dependencies.Input('intermediate', 'children'),
    ],
)
def update_output(js):
    print('update_output')
    dat = js
    d1 = pd.read_json(dat['d1'])
    d2 = pd.read_json(dat['d2'])
    d3 = pd.read_json(dat['d3'])
    return f"{d1.shape[0], d1.shape[1]}"
app.css.config.serve_locally = True
app.scripts.serve_locally = True
app.run_server(debug=False)

Your first snippet has copied a typo from Chris’ first draft:

See the linked conversation: Sharing a dataframe between plots

   return {
       'df_1': df_1.to_json(orient='split'),
       'df_2': df_2.to_json(orient='split'),
       'df_3': df_3.to_json(orient='split'),
   }