In an HTML dashboard, why is a simple JS file pars...

curtismcginity · ‎04-07-2021

In the context of an HTML Dashboard, why would a simple JS file get parsed into HTML within .../static/app/myapp/?

For example, line 20 of myClass.js reads:

size(width,height) {

which, inside of my.splunk.domain/en-US/static/@12B...85/app/myapp/myClass.js becomes

<tr>
  <td id="L20" class="blob-num js-line-number" data-line-number="20"></td>
  <td id="LC20" class="blob-code blob-code-inner js-file-line">
   <span class=pl-en>size</span>
   <span class=pl-kos>(</span>
   <span class=pl-s1>width</span>
   <span class=pl-kos>,</span>
   <span class=pl-s1>height</span>
   <span class=pl-kos>)</span>
   <span class=pl-kos>{</span></td>
</tr>

and so on for the entire file. Please note that myClass.js has the simple form

// this is the entire file
class myClass {
 // vanilla js stuff...
}

Here's the relevant context:

I have an HTML dashboard, properly converted from a simple XML via the UI.
This dashboard uses two JS files: d3.js and myClass.js.
- The first file, d3, works just fine; the second is included identically:

require.config({
    baseUrl: "{{SPLUNKWEB_URL_PREFIX}}/static/js",
    waitSeconds: 0, // Disable require.js load timeout
    paths: {
        'd3': '{{SPLUNKWEB_URL_PREFIX}}/static/app/myapp/d3v5',
        'myClass': '{{SPLUNKWEB_URL_PREFIX}}/static/app/myapp/myClass'
    }
});

require([
    "splunkjs/mvc",
    // ...
    "myClass",
    "d3"
    // Add comma-separated libraries and modules manually here, for example:
    // ..."splunkjs/mvc/simplexml/urltokenmodel"
    ],
    function(
        mvc,
        // ...
        myClass,
        d3
        // Add comma-separated parameter names here, for example:
        // ...UrlTokenModel
        ) {
      // Everything else...
    }

Both scripts are properly located in /splunk/etc/apps/myapp/appserver/static
myClass.js does depend on d3.js.
The browser console logs two errors:
- Uncaught SyntaxError: Unexpected token '<' in myClass.js:

// Translations for en_US
i18n_register({"plural": function(n) { return n == 1 ? 0 : 1; }, "catalog": {}});

<!DOCTYPE html> // ERROR THROWN HERE
// ...

bubbling to Uncaught TypeError: Cannot read property 'myProperty' of undefined

Again, d3.js is also included in the same way and works fine; the script includes a similar preamble but is otherwise unchanged.

Any ideas and/or solutions would be very much appreciated. Also, apologies for the formatting; extra spaces are being inserted.

In an HTML dashboard, why is a simple JS file parsed into HTML?

javascript

other

Join Us for Splunk University and Get Your Bootcamp Game On!

.conf24 | Learning Tracks for Security, Observability, Platform, and Developers!

Announcing Scheduled Export GA for Dashboard Studio