Automatic Simple XML Dashboard: JS Stack: VisualizationRegistry Error Cause?

[chuwu]

Can someone explain what causes this error?

Error: Uncaught Error: VisualizationRegistry has not been populated yet. Make sure that the visualizations collection is loaded before attempting to use it.

This happened as soon as I added <script src="{{SPLUNKWEB_URL_PREFIX}}/static/app/my_app_name/my_js_name.js" type="text/javascript"></script> to the end of the HTML dashboard. The HTML dashboard is auto-generated from a simple XML dashboard I created.

Below is the HTML dashboard appended with that script:

<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My App Name</title>
<link rel="shortcut icon" href="/en-US/static/@D02ED261DB0463D7C4253E2343E0C4184E4E4E2BF5E7A1B1DE369AD38B6562B5/img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/build/css/bootstrap-enterprise.css" />
<link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/build/css/splunkjs-dashboard.css" />

    <meta name="referrer" content="never" />
    <meta name="referrer" content="no-referrer" />

      <script>
            window._splunk_metrics_events = {
               push : function() {},
               active: false,
               }
      </script>
</head>

<a aria-label="Screen reader users, click here to skip the navigation bar" class="navSkip" href="#navSkip" tabIndex="1">Skip Navigation ></a>
<div class="header splunk-header">
        <div id="placeholder-splunk-bar">
            <a href="{{SPLUNKWEB_URL_PREFIX}}/app/launcher/home" class="brand" title="splunk > listen to your data">splunk<strong>></strong></a>
        </div>
            <div id="placeholder-app-bar"></div>
</div>
<a id="navSkip"></a>


<div class="dashboard-header clearfix">
    <h2>My App Name</h2>
</div>

<div id="row1" class="dashboard-row dashboard-row1">
    <div id="panel1" class="dashboard-cell" style="width: 100%;">
        <div class="dashboard-panel clearfix">

            <div class="panel-element-row">
                <div id="element1" class="dashboard-element html" style="width: 100%">
                    <div class="panel-body html">
                            <div id="mysearchbar1"></div><div id="mysearchcontrols1"></div><div id="mytable1"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>