What are the fundamental differences when running automation in headless mode? Encountering possible JS exception only in headless mode

[Bernard]

I have recently encountered a very strange problem or something which might be a bug with running automation in headless mode, and I believe it might have to do with the way JavaScript is being executed in headless mode. (I have also posted this message on https://stackoverflow.com/q/62699870/3324415 if you would rather view it in that interface)

On a high level this is what I am experiencing:

Typescript and Moment.js is used to map and sort a list of dates "YYYY-MM-DD" which go into a drop down as the below example HTML attempts to show (this code is formatted but not setup to run):

<div data-bind="visible: !isBusy()" style="">
   <div class="abc-panel abc-panel-default">
      <div class="abc-panel-header">
         <label>
         Book a Thing: <span data-bind="text : somethingNumber()" id="somethingNumberId">Unique Number: ABC123/4</span>
         </label>
      </div>
   </div>
   <div class="modal-body" style="padding-top : 0px !important">
      <div class="form-group row" data-bind="visible: isSomething" style="display: none;">
         <label class="col-sm-6 control-label">Available Spots</label>
         <div class="form-control-static" data-bind="bootstrapValidation: { value: selectedSpots }">
            <select class="form-control" data-bind="options: availableSpots, value: selectedSpots, optionsCaption: "Please Select...", optionsText: "SpotName"" id="spotSelectedId">
            <option value="">Please Select...</option>
            </select>
         </div>
      </div>
      <div class="form-group row" data-bind="visible: showAvailableDates">
         <label class="col-sm-6 control-label">Available Assessment Dates</label>
         <div class="form-control-static has-error" data-bind="bootstrapValidation: { value: selectedDateSlot }">
            <select class="form-control" data-bind="options: availableDateSlots, value: selectedDateSlot, optionsCaption: "Please Select...", optionsText: "Date"" id="availableSlotsSelectId">
            <option value="">Please Select...</option>
            <option value="">2020-07-03</option>
            <option value="">2020-07-06</option>
            <option value="">2020-07-07</option>
            <option value="">2020-07-08</option>
            <option value="">2020-07-09</option>
            <option value="">2020-07-10</option>
            <option value="">2020-07-13</option>
            <option value="">2020-07-14</option>
            <option value="">2020-07-15</option>
            <option value="">2020-07-16</option>
            <option value="">2020-07-17</option>
            </select>
         </div>
      </div>
      <div>
         <button class="btn btn-default" data-bind="click: cancel" id="cancelBtnId">Cancel</button>
         <button class="btn btn-success pull-right" data-bind="enable: canBook, click : bookSpot, popover:{}" data-toggle="popover" data-placement="top" data-content="Book Assessment" id="bookBtnId" disabled="" data-original-title="" title="">Book</button>
      </div>
   </div>
</div>

When I turn headless mode off this exception does not occur, on exactly the same parameters and environment as before.

Unfortunately my companies website which I am automating against makes use of some extremely archaic dependency libraries (example: Moment.js 2.5.0, and Bootstrap: v3.1.1) and they are in the near-term not going to upgrade any of those as the risk in breaking other things or having to re develop some features is not acceptable to them. So that is not helping anything with regards to the problem I will describe below.

Any help would be greatly appreciated!