Are there timing races with requirejs splunkjs/ready! when loading appserver/static js modules

[abramble]

TL/DR: A custom cell renderer only works after using table pagination or column sorting controls, but it seems related to loading appserver/static code with require.

I am attempting to add a custom table cell renderer to a simple xml dashboard. Doing this as per the documented examples works as expected. Here is the dashboard xml for testing.

<dashboard script="icon_test.js">
  <label>Icon Test</label>
  <row>
    <panel>
      <table id="asset_test">
        <title>Asset Icons</title>
        <search>
          <query>| inputlookup asset_rendering | stats count by asset_name</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</dashboard>

icon_test.js loads successfully and modifies the desired cell , just placing square brackets around the cell value. When the dashboard loads everything works.

// icon_test.js
require([
  'underscore',
  'splunkjs/mvc',
  'splunkjs/mvc/tableview',
  'splunkjs/mvc/simplexml/ready!'
], function(_, mvc, TableView) {

  var SimpleRenderer = TableView.BaseCellRenderer.extend({
    canRender: function(cell) { return cell.field === 'asset_name'; },
    render: function($td,cell) {
      $td.text("[[ " + cell.value + " ]]");
    }
  });


  var target = mvc.Components.get('icon_test');
  var viz = target.getVisualization(
    function(tableView) {
      tableView.addCellRenderer( new SimpleRenderer() );
    }
  );

}

The above works just fine.

In order to add icons based on the cell value across many dashboards, the icon code has been moved into its own module, and is loaded by icon_test.js require as '/static/app/myapp/customicons.js'

// customicons.js
define([],function() {   
  var cssRex = new RegExp('[^\w\d_]','g');
  var iconMaker = {
    getIcon: function(name) {
      // contrived example
      var css_name = name.toString().replace( cssRex , '_' );

      var icon = document.createElement('div');
      icon.className = 'asset-icon-' + css_name;
      icon.style = 'color: green';
      icon.innerText = name;
      return icon;
    }
  };
  return iconMaker;
});

Still no problem. However - if customicons.js requires any further modules from appserver/static , the issue arises, making it difficult to factor out reusable parts.

Can anyone suggest work arounds for this?

Possibilities I'm considering but am unsure if they'll help;

• putting all shared code into one file and use define with module names and see where that takes me.
• add a build step to the app (does not currently need one) and use webpack to bundle everything