undefined is not a constructor error in safari and firefox

[serhii-havrylov]

The following code produces undefined is not a constructor (evaluating 'new window.ResizeObserver(_this.resizeHandler)') error in safari and firefox browsers, however it works normally in google chrome.

import dash
import dash_core_components as dcc
import dash_extendable_graph as deg
import dash_html_components as html
import plotly.express as px
import plotly.graph_objects as go
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate


if __name__ == "__main__":
    app = dash.Dash()
    layout = [deg.ExtendableGraph(id="graph", figure=px.scatter(),
                                  style={"height": "75vh"}),
              dcc.Interval(id="ms-beat",
                           interval=1000,
                           n_intervals=0)
              ]
    app.layout = html.Div(children=layout)
    flag = False

    @app.callback(Output("graph", "figure"),
                  Input("ms-beat", "n_intervals"),
                  State("graph", "figure"))
    def add_level_lines(n_intervals, figure):
        global flag
        if flag:
            raise PreventUpdate
        flag = True
        figure = go.Figure(figure)
        figure.add_hline(y=24, line_dash="dot", annotation_text="label")
        figure.update_layout(autosize=True)
        return figure

    app.run_server(debug=True)
    # app.run_server()

exception details:

undefined is not a constructor (evaluating 'new window.ResizeObserver(_this.resizeHandler)')

(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)
ResizeDetector

constructClassInstance@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_1m1617985068.14.0.js:13015:28

updateClassComponent@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_1m1617985068.14.0.js:17235:29

callCallback@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_1m1617985068.14.0.js:182:21

dispatchEvent@[native code]

invokeGuardedCallbackDev@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_1m1617985068.14.0.js:231:31

invokeGuardedCallback@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_1m1617985068.14.0.js:286:38

beginWork$1@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_1m1617985068.14.0.js:23338:30

performUnitOfWork@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_1m1617985068.14.0.js:22292:25

workLoopSync@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_1m1617985068.14.0.js:22265:41

performSyncWorkOnRoot@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_1m1617985068.14.0.js:21891:23

performSyncWorkOnRoot@[native code]

http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_1m1617985068.14.0.js:11224:34

unstable_runWithPriority@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react@16.v1_9_1m1617985068.14.0.js:2685:26

flushSyncCallbackQueueImpl@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_1m1617985068.14.0.js:11219:26

flushSyncCallbackQueue@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_1m1617985068.14.0.js:11207:31

flushPassiveEffectsImpl@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_1m1617985068.14.0.js:23018:27

unstable_runWithPriority@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react@16.v1_9_1m1617985068.14.0.js:2685:26

http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_1m1617985068.14.0.js:22834:32

workLoop@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react@16.v1_9_1m1617985068.14.0.js:2629:44

flushWork@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react@16.v1_9_1m1617985068.14.0.js:2584:26

performWorkUntilDeadline@http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react@16.v1_9_1m1617985068.14.0.js:2196:50

[bcliang]

I wasn't able to replicate the bug report using firefox v88, but the provided error suggests that react-resize-detector wasn't bundled properly with the component. That shouldn't be the case (particularly with app.run_server(debug=True)), but it's possible I messed something up in the build.

@serhii-havrylov Are you building from source or installing from pypi? Can you provide pip list output for dash-related packages (dash, dash-core-components, dash-extendable-graph)?

I will make an update to package.json (moving react-resize-detector into dependencies section) in case there are some particularities, but that would theoretically only affect the minimized bundle. Locally, I haven't observed a change on the compiled dash_extendable_graph.dev.js

[serhii-havrylov]

Hi

Thank you for your reply. I've installed it from pypi:

Package                  Version
------------------------ -------------------
dash                     1.20.0
dash-core-components     1.16.0
dash-extendable-graph    1.3.0
dash-html-components     1.1.3
dash-renderer            1.9.1
dash-table               4.11.3