"Error loading dependencies" when using some dcc elements in corporate IE and Chrome

Question

I get an error message of “Error loading dependencies” in the company installed Internet Explorer 11 and Chrome 51 but not in the up-to-date Chrome that I installed myself. Also, if I open up the developer tools, Internet Explorer works fine.

The IE console provides the following error messages

HTML1300: Navigation occurred.
supplier
This browser lacks typed array (Uint8Array) support which is required by `buffer` v5.x. Use `buffer` v4.x if you require old browser support.

SCRIPT5009: 'Uint8ClampedArray' is undefined
plotly-1.35.2.min.js (7,1186569)

SCRIPT5009: 'Set' is undefined
bundle.js (21,23784)

Error: dash_core_components was not found.
   {
      [functions]: ,
      description: "dash_core_components was not found.",
      message: "dash_core_components was not found.",
      name: "Error",
      stack: "Error: dash_core_components was not found.
   at e.default.resolve (http://<url>:8080/supplier/_dash-component-suites/dash_renderer/bundle.js?v=0.11.3:9:28196)
   at s (http://<url>:8080/supplier/_dash-component-suites/dash_renderer/bundle.js?v=0.11.3:9:16176)
   at s (http://<url>:8080/supplier/_dash-component-suites/dash_renderer/bundle.js?v=0.11.3:9:15719)
   at value (http://<url>:8080/supplier/_dash-component-suites/dash_renderer/bundle.js?v=0.11.3:9:16980)
   at b._renderValidatedComponentWithoutOwnerOrContext (http://<url>:8080/supplier/_dash-component-suites/dash_renderer/react-dom@15.4.2.min.js?v=0.11.3:13:10739)
   at b._renderValidatedComponent (http://<url>:8080/supplier/_dash-component-suites/dash_renderer/react-dom@15.4.2.min.js?v=0.11.3:13:10870)
   at b.performInitialMount (http://<url>:"
   }

Unhandled promise rejection TypeError: Unable to get property 'find' of undefined or null reference
   "Unhandled promise rejection"
   {
      [functions]: ,
      description: "Unable to get property 'find' of undefined or null reference",
      message: "Unable to get property 'find' of undefined or null reference",
      name: "TypeError",
      number: -2146823281,
      stack: "TypeError: Unable to get property 'find' of undefined or null reference
   at l (http://<url>:8080/supplier/_dash-component-suites/dash_renderer/bundle.js?v=0.11.3:1:29665)
   at Anonymous function (http://<url>:8080/supplier/_dash-component-suites/dash_renderer/bundle.js?v=0.11.3:1:29458)
   at Anonymous function (http://<url>:8080/supplier/_dash-component-suites/dash_renderer/bundle.js?v=0.11.3:29:941)
   at f.dispatch (http://<url>:8080/supplier/_dash-component-suites/dash_renderer/bundle.js?v=0.11.3:29:1326)
   at Anonymous function (http://<url>:8080/supplier/_dash-component-suites/dash_renderer/bundle.js?v=0.11.3:1:30985)
   at u (http://<url>:8080/supplier/_dash-component-suites/dash_renderer/bundle.js?v=0.11.3:15:22048)
   at Anonymous function (http://<url>:8080/supplier/_dash-component-suites/"
   }

Here's a massively stripped down version of my dash app that produces the same error. tool is my package that has a flask instance in it.

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
from functools import partial
import datetime as dt

from tool import server, session, blu, cache, CACHE_TIMEOUT

app_tst = dash.Dash(__name__, server=server, url_base_pathname='/ie_test/')
app_tst.css.config.serve_locally = True
app_tst.scripts.config.serve_locally = True

app_tst.layout = html.Div([
    "hi!",
    dcc.Dropdown(
        id='tstdropdown',
        options=[{'label': str(x+1), 'value': str(x)} for x in range(10)],
        placeholder='Dropdown test'
    ),
    dcc.RadioItems(
        options=[
            {'label': '1', 'value': '1'},
            {'label': '2', 'value': '2'},
            {'label': '3', 'value': '3'},
        ],
        value='3',
        id='radiotest'
    ),
    dcc.RangeSlider(
        id='rangetest',
        min=0,
        max=10,
        marks=[str(x) for x in range(11)],
        pushable=0,
        value=5
    ),
    dcc.Graph(
        id='graphtest',
        figure={}
    )
])

When I removed both dcc.Graph and dcc.RangeSlider, the app works fine. Using either dcc.Graph or dcc.RangeSlider by themselves also produced the "error loading dependencies" problem.

I've tried the following:

• adding 'IE=edge' to my headers in flask
• serving the scripts locally with app_vndr.css.config.serve_locally = True and app_vndr.scripts.config.serve_locally = True and a flask function that routes /static/path:path/ to the correct files.
• loading babel.js's polyfill. Seems like Plotly is already doing this, though, since I got a you can only have one instance of babel.js message.

What should I be looking at to fix this? I feel like I'm missing something silly but I'm not sure what to check or try.

Answer 1

After talking with a mod on the plotly forums, the following steps fixed the problem:

• upgrade from dash-core-components==0.21.0 to dash-core-components==0.22.1
• provide actual info about the figure

Without the populated dictionary for figure={...}, the issue still persisted.

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
from functools import partial
import datetime as dt

from SupplyChainReportingTool import server, session, blu, cache, CACHE_TIMEOUT
app_tst = dash.Dash(__name__, server=server, url_base_pathname='/ie_test/')
app_tst.css.config.serve_locally = True
app_tst.scripts.config.serve_locally = True

layout = go.Layout(
    yaxis=dict(title='Count',range=[0, 100],fixedrange=True,side='right',zeroline=False,showgrid=False),
    yaxis2=dict(title='percent',range=[0, 1],fixedrange=True,side='left',overlaying='y')
)
data = [go.Scatter(x=[],y=[],name='Data',mode='lines+markers')]

app_tst.layout = html.Div([
    dcc.Graph(
        id='graphtest',
        figure={'data': data, 'layout': layout}
    )
])

With this working, I still need to move back to dash-core-components==0.21.0 to see if that really was an issue.