Configurable product options not being rendered

[EightBitBoy]

On Magento 2.3.6p1 we have an issue where customers cannot select a product's options because the options list is empty.

This is very inconsistent since different products with the same option attribute sometimes show the options list and sometimes don't.

Here is an example for an empty options list:

This is a working options list for the exact same options attribute:

Both products are identical besides the pictures and names.

It seems that just very seldomly options are shown for a product when most of the time it does not work; the reason for this is not known to me.

The problem exists since we upgraded from Magento 2.3.0 to 2.3.6-p1.

This issue has a heavy impact since most products sare sold as configurable products which customers are currently unable to buy. (My wife is killing me!)

Besides obvious hints like clearing caches, reindexing or making sure the products are in stock I found neither a solution nor any direction to look for to solve the problem. The server logs show no irregularities, the Magento cron job is running fine.

Any help is appreciated!

Update 1: I was told that this issue already sometimes happened on Magento 2.3.0 but not as often.

Update 2: I found a JS error which happens on the site when the page loads in this script:

<script type="text/javascript">
require(['jquery', 'jquery/ui', 'domReady!'], function($) {
  $('body').on('updatePrice', function (e, data) {
    var swatchWidget = $('.swatch-opt').data('mage-SwatchRenderer');
    if(swatchWidget) {
      var options = _.object(_.keys(swatchWidget.optionsMap), {});
      swatchWidget.element.find('.' + swatchWidget.options.classes.attributeClass + '[option-selected]').each(function () {
          options[$(this).attr('attribute-id')] = $(this).attr('option-selected');
      });
      result = swatchWidget.options.jsonConfig.optionPrices[_.findKey(swatchWidget.options.jsonConfig.index, options)];
    } else {
      var configurableWidget = $('#product_addtocart_form').data('mage-configurable');
      var options = {};
      configurableWidget.element.find(configurableWidget.options.superSelector + ' option:selected').each(function () {
        if($(this).val()) {
            options[Number($(this).parent().prop('id').replace('attribute', ''))] = $(this).val();
        }
      });
      var config = configurableWidget.option('spConfig');
      result = config.optionPrices[_.findKey(config.index, options)];
    }
    var basePriceField = $('.product-info-price .baseprice');
    if (typeof result != 'undefined' && result.magenerds_baseprice_text.length && basePriceField.length) {
        basePriceField.html(result.magenerds_baseprice_text);
    }
  });
});
</script>

The script seems to be responsible for rendering the options. The error happens in this line:

configurableWidget.element.find(configurableWidget.options.superSelector + ' option:selected').each(function () {

The Error message is "Uncaught TypeError: Cannot read property 'element' of undefined".

This means something is wrong with the following line:

var configurableWidget = $('#product_addtocart_form').data('mage-configurable');

The selected ID is definitely in the page, probably the data assigned to this element are missing which results in the options not being rendered.

Update 3: I found out some weird behaviour in which for some products the selectable options list is already populated in the HTML document sent by the server. Those products work just fine. The HTML documents do not contain the script mentioned above!

Then there are pretty much identical products with the same option where the options list seems to be populated dynamically with the help of the script shown above. In those cases no option selection is possible.

I do not see any reason why products are handled differently.

For some reason this forum here does not render the images I uploaded for this post. They can be seen an Stackoverflow: https://magento.stackexchange.com/questions/332505/configurable-product-options-randomly-empty-in-fr...

Update 4: After taking a deep dive into the code I found out that an extension which seemingly is not compatible with the current M2 version injected the faulty Javascript code. After removing said extension the options dropdown list worked just fine.

This issue is solved!