"Error loading dependencies" in IE and older Chrome (51)


#1

I get an error message of “Error loading dependencies” in internet explorer 11 and Chrome 51 not in up-to-date chrome. Also, if I open up the developer tools, Internet Explorer works fine. I noticed that there’s a drop-down for Document Mode that says Edge when the developer tools is open and the app is working. If I switch it to Document Mode “10”, I get the same “Error loading dependencies” and a bunch of error messages in the js console:

TypeError: Invalid calling object

and

Unhandled promise rejection TypeError: Unable to get property 'find' of undefined or null reference

So far I’ve tried creating an inherited class from dash.Dash that adds the following to the head of the html:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

but that didn’t solve the issue. What else might be causing this? I’m pretty sure it isn’t a python dependence error first because it works fine in chrome and second because the console doesn’t throw any errors.


#2

I’ve assumed that this is related to using IE since I can’t reproduce the issue in Chrome but it occurs every time in IE. Has anyone seen this before?


#3

Hi RagingRoosevelt,

Is this on a personal or company pc? I have had problems with IE related to company security settings.


#4

eddy_oj,

Yeah, it’s a work computer. Do you know what security settings might be causing the problem?


#5

Sorry for late reply.

I suspect there are lots of possible causes. I would scan the security settings available in IE. In my case, i was testing it on a server and i had internet security settings locked out to me, so i tested in chrome instead. If youre on a server it wont matter to the end user but if on a laptop thats a bit different and youll have to fight that one out with your company.

Alternatively, another possible cause might relate to a conflict between security settings in IE and the requirement to download Dash related scripts during the app initialization so i would try and load everything locally in your script.

You can follow this example:

The lines youre interssted in are:

app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

And

@app.server.route(’/static/path:path’)
def static_file(path):
static_folder = os.path.join(os.getcwd(), ‘static’)
return send_from_directory(static_folder)


#6

I tried using the serve_locally switch but that doesn’t seem to have fixed it. I also tried with an older chrome install from the company’s package manager and that also ran into the issue.

I’m going to try to locate what specific security setting got used since that seems like the possible culprit.


#7

I looked over the JS console errors and found the following:

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/"
   }

Working With IE 11 and Document Mode
#8

I tried some additional troubleshooting:

  1. Created a whole new dash app using the same imports and structure.

    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_vndr = dash.Dash(__name__, server=server, url_base_pathname='/ie_test/')
    app_vndr.css.config.serve_locally = True
    app_vndr.scripts.config.serve_locally = True
    
    app_vndr.layout = html.Div([
    ])
    
  2. Added to layout item-by-item. I assumed that the issue was coming from a dcc component so I focused on adding those from the original app.

  3. dcc.Dropdown and dcc.RadioItems worked fine.

    app_vndr.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'
        ),
    ])
    
  4. Adding dcc.RangeSliderto the previous dcc elements broke it.

    app_vndr.layout = html.Div([
        dcc.RangeSlider(
            id='rangetest',
            min=0,
            max=10,
            marks=[str(x) for x in range(11)],
            pushable=0,
            value=5
        )
    ])
    
  5. Adding dcc.Graphto the previous dcc elements broke it.

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

Using either of dcc.RangeSlider or dcc.Graph gave the errors that I mentioned in a previous comment so it seems like those components are introducing the problem.


#9

This indicates that the dash-core-components library source code wasn’t loaded. This shouldn’t depend on which dcc components are rendered in the app.layout. If you see this error message, could you check your browser’s network requests? https://developers.google.com/web/tools/chrome-devtools/network-performance/reference. Look up the one for the dash-core-components suite and look at the response - it might be a 500 or a 404 or it might be blocked from a corporate proxy.

You can also try setting:

app.scripts.config.serve_locally = True
app.css.config.serve_locally = True

which would load the assets locally instead of from the global CDN. If the app is having trouble loading the dash-core-components JS bundle, loading it locally might fix it.


#10

I’ve been using the serve_locally flag since @eddy_oj suggested it. Everything is coming through with http response of 200.

URL Protocol Method Result Type Received Taken Initiator Wait‎‎ Start‎‎ Request‎‎ Response‎‎ Cache read‎‎ Gap‎‎
http://ctnad0004r600m2.us164.corpintra.net:8080/ie_test/ HTTP GET 200 text/html 1.98 KB 16 ms navigate 0 0 16 0 0 14891
/ie_test/_dash-component-suites/dash_core_components/rc-slider@6.1.2.css?v=0.21.0 HTTP GET 200 text/css 6.94 KB 15 ms 16 15 0 0 0 14876
/ie_test/_dash-component-suites/dash_core_components/react-select@1.0.0-rc.3.min.css?v=0.21.0 HTTP GET 200 text/css 6.97 KB 15 ms 16 15 0 0 0 14876
/ie_test/_dash-component-suites/dash_core_components/react-virtualized@9.9.0.css?v=0.21.0 HTTP GET 200 text/css 2.42 KB 31 ms 16 15 16 0 0 14860
/ie_test/_dash-component-suites/dash_core_components/react-virtualized-select@3.1.0.css?v=0.21.0 HTTP GET 200 text/css 0.63 KB 16 ms 31 0 16 0 0 14860
/ie_test/_dash-component-suites/dash_core_components/react-dates@12.3.0.css?v=0.21.0 HTTP GET 200 text/css 17.14 KB 16 ms 31 0 16 0 0 14860
/ie_test/_dash-component-suites/dash_renderer/react@15.4.2.min.js?v=0.11.3 HTTP GET 200 application/JavaScript 20.92 KB 16 ms 31 0 16 0 0 14860
/ie_test/_dash-component-suites/dash_renderer/react-dom@15.4.2.min.js?v=0.11.3 HTTP GET 200 application/JavaScript 121.20 KB 31 ms 31 0 16 15 0 14845
/ie_test/_dash-component-suites/dash_html_components/bundle.js?v=0.9.0 HTTP GET 200 application/JavaScript 151.05 KB 63 ms 31 31 16 16 0 14813
/ie_test/_dash-component-suites/dash_core_components/plotly-1.35.2.min.js?v=0.21.0 HTTP GET 200 application/JavaScript 2.36 MB 421 ms 47 15 47 359 0 14439
/ie_test/_dash-component-suites/dash_core_components/bundle.js?v=0.21.0 HTTP GET 200 application/JavaScript 1.46 MB 312 ms 47 78 0 234 0 14548
/ie_test/_dash-component-suites/dash_renderer/bundle.js?v=0.11.3 HTTP GET 200 application/JavaScript 287.83 KB 109 ms 109 16 0 93 0 14689
/ie_test/_dash-layout HTTP GET 200 application/json 384 B 3.97 s XMLHttpRequest 10764 499 3479 0 0 165
/ie_test/_dash-dependencies HTTP GET 200 application/json 189 B 3.58 s XMLHttpRequest 11154 359 3229 0 0 165

All that is in the same request as Error: dash_core_components was not found.


#11

OK thanks for sharing those - Could you try changing the version of the dash-core-components library? Latest

pip install dash-core-components==0.22.1

or an earlier version:

pip install dash-core-components==0.19.0

(changelog is here: https://github.com/plotly/dash-core-components/blob/master/CHANGELOG.md)


#12

Looks like I was using 0.21.0.

I upgraded to 0.22.1. The test example wasn’t working at first, however. Here’s what I had when it didn’t work.

   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

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

It seems like part of the problem was that dash didn’t like having an empty figure. I loaded it up with an empty Scatter trace and some default settings for the y-axis I planned to use and ended up with the following:

   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}
       )
   ])

which works in the company IE setup. I’ve transferred the solution over to my actual app and it also fixed the issue there.

I’ll try to change back to dash-core-components==0.21.0 and see if the package version was the issue. But for now, I assume it was both the package version and the empty figure that caused the problem.


#13

Also, thank you very much @chriddyp and @eddy_oj for helping me work through this. My company is pretty entrenched in Java and C# and this is one of the first python projects they’ve seen. I’m really glad to demonstrate that the python environment can play nice with the official tools. I’m hoping that with the success of this project, I can convince folks that we need an instance of onprem+dash.


#14

No problem. I am trying to achieve something similar.


#15

I also jumped into dependencies issue in IE with js error “SCRIPT5009: ‘Uint8ClampedArray’ is undefined”.

I found that outdated IE11 was a problem - releases older than April 8, 2014 do not have type Uint8ClampedArray (see https://support.microsoft.com/en-us/help/2929437/description-of-the-security-update-for-internet-explorer-11-on-windows).

I solved the problem using @aaron5555’s code that can be found at https://github.com/plotly/plotly.js/issues/895

The only problem was the resources loading error - plotly js lib is loaded before any custom js. So I subclassed dash.Dash with the following code

from dash import Dash
import dash_renderer        
        
class CustomDash(Dash): 

    def _generate_scripts_html(self):
        srcs = self._collect_and_register_resources(
            [{"external_url": '/static/demo-init.js'}] +
            self.scripts._resources._filter_resources(
                dash_renderer._js_dist_dependencies
            ) +
            self.scripts.get_all_scripts() +
            self.scripts._resources._filter_resources(
                dash_renderer._js_dist
            )
        )

        return '\n'.join([
            '<script src="{}"></script>'.format(src)
            for src in srcs
        ])        

I know that’s ugly, but I need to support older IE11 …

Hope it helps.