The Animation in Dash App Fails

[listenzcc]

In my building the animation fig fails on Dash App.
My dcc version is '0.44.0'.

The Console in my web browser warns

WARN: API call to Plotly.animate rejected. undefined
a @ plotly-1.45.0.min.js?v=0.44.0&m=1551752264:7
i.warn @ plotly-1.45.0.min.js?v=0.44.0&m=1551752264:7
(匿名) @ plotly-1.45.0.min.js?v=0.44.0&m=1551752264:7
Promise.catch(异步)

r.executeAPICommand @ plotly-1.45.0.min.js?v=0.44.0&m=1551752264:7
(匿名) @ plotly-1.45.0.min.js?v=0.44.0&m=1551752264:7
requestAnimationFrame(异步)

k @ plotly-1.45.0.min.js?v=0.44.0&m=1551752264:7
w @ plotly-1.45.0.min.js?v=0.44.0&m=1551752264:7
(匿名) @ plotly-1.45.0.min.js?v=0.44.0&m=1551752264:7
(匿名) @ plotly-1.45.0.min.js?v=0.44.0&m=1551752264:7
(index):1 Uncaught (in promise) undefined

My Testing Code

# %%
import dash
import plotly.express as px
import dash_core_components as dcc
import dash_html_components as html

import plotly.express as px

# %%
df = px.data.gapminder()
fig = px.scatter(df, x="gdpPercap", y="lifeExp", animation_frame="year", animation_group="country",
                 size="pop", color="continent", hover_name="country",
                 log_x=True, size_max=55, range_x=[100, 100000], range_y=[25, 90])


# %%
app = dash.Dash(__name__)

style = {'width': '100%', 'display': 'inline-block'}

app.layout = html.Div(
    [
        # Main Graph: graph1
        html.Div(
            [
                dcc.Graph(id='graph1', figure=fig)
            ],
            style=style
        ),
    ]
)


if __name__ == '__main__':
    app.run_server(debug=True, port=8080)

[alexcjohnson]

dcc 0.44.0 is extremely old which is why you have an old plotly.js (1.45.0)
Can you try upgrading dash to the latest (which, since v1.0, will also upgrade dcc)?

[listenzcc]

Thank you, @alexcjohnson, the problem has been solved by upgrading my dcc. It upgraded the plotly.js into 1.50.1 as well.