Taxamo and Braintree JavaScript Error

[JethroG]

I am testing M2.4.3-p1 with the taxamo (ioss extension), in the checkout when using Braintree as the payment method, on clicking place order we get an "Uncaught TypeError: Cannot read properties of undefined (reading 'userAgent')" JavaScript error.

5.04de1faef66f4d0a3735.songbird.js:54 Uncaught TypeError: Cannot read properties of undefined (reading 'userAgent')
    at 5.04de1faef66f4d0a3735.songbird.js:54:9243
    at 5.04de1faef66f4d0a3735.songbird.js:54:9160
    at t.exports (5.04de1faef66f4d0a3735.songbird.js:54:9444)
    at Object.<anonymous> (5.04de1faef66f4d0a3735.songbird.js:54:5801)
    at n (songbird.js:1:107)
    at Object.<anonymous> (5.04de1faef66f4d0a3735.songbird.js:54:3940)
    at n (songbird.js:1:107)
    at Object.<anonymous> (5.04de1faef66f4d0a3735.songbird.js:12:30332)
    at n (songbird.js:1:107)
    at songbird.js:1:1623

https://songbirdstag.cardinalcommerce.com/edge/v1/04de1faef66f4d0a3735/5.04de1faef66f4d0a3735.songbi... Is loaded as part of the Braintree checkout.

The file that causes the problem in the taxamo extenison is; /vendor/taxamo/tax/view/frontend/web/js/view/taxamo-liability.js

define(
    [
        'ko',
        'uiComponent',
        'mage/storage',
        'mage/url'
    ],
    function (ko, Component, storage, url) {
        "use strict";

        return Component.extend({
            defaults: {
                template: 'Taxamo_Tax/taxamoliability'
            },
            showTaxamoLiability: ko.observable(false),
            taxamoLiabilityMessage: ko.observable(''),
            initialize: function () {
                self = this;
                this._super();
                window.addEventListener('hashchange', _.bind(this.hashChangeHandler, false));
                self.checkLiability();
            },
            checkLiability: function () {
                let checkLiabilityUrl = url.build('taxamo/checkout/liable');

                storage.get(checkLiabilityUrl).done(
                    function (response) {
                        if (response.success) {
                            self.showTaxamoLiability(response.show_taxamo_liability)
                            self.taxamoLiabilityMessage(response.message)
                        }
                    }
                ).fail(
                    function (response) {
                        self.showTaxamoLiability(false)
                        self.taxamoLiabilityMessage('')
                    }
                );

                return true;
            },
            hashChangeHandler: function () {
                self.checkLiability();
            }
        });
    });

The contents of the template it loads is;

<div data-bind="if: showTaxamoLiability" class="taxamo-liability">
    <div class="taxamo-liability-text">
        <p data-bind="text: taxamoLiabilityMessage"></p>
    </div>
    <div class="checkout-agreement field choice required">
        <input type="checkbox" name="taxamo-liability" class="required-entry"
               data-bind="attr: {id: 'taxamo-liability'}"/>
        <label data-bind="attr: {for: 'taxamo-liability'}" class="required-entry"><span
            data-bind="i18n: 'I have read and agree to the above'"></span></label>
    </div>
</div>

I have tried setup with all other third parties extensions disabled and still get the error, but I haven't tried other versions of Magento.

Can anyone offer any insight or suggestions? My JavaScript experience is limited. Thanks.

[JethroG]

After some further testing, the problem comes from the line;

self = this;

 I think I can change self to this, which I have done below, but I am having problems getting the last bit to work. I get this error "Uncaught TypeError: that.checkLiability is not a function".

I have tried several ways and not found anything that works.

define(
    [
        'ko',
        'uiComponent',
        'mage/storage',
        'mage/url'
    ],
    function (ko, Component, storage, url) {
        "use strict";

        return Component.extend({
            defaults: {
                template: 'Taxamo_Tax/taxamoliability'
            },
            showTaxamoLiability: ko.observable(false),
            taxamoLiabilityMessage: ko.observable(''),
            initialize: function () {
                var that = this;
                this._super();
                window.addEventListener('hashchange', _.bind(this.hashChangeHandler, false));
                that.checkLiability();
            },
            checkLiability: function () {
                let checkLiabilityUrl = url.build('taxamo/checkout/liable');

                storage.get(checkLiabilityUrl).done(
                    function (that,response) {
                        if (response.success) {
                            that.showTaxamoLiability(response.show_taxamo_liability)
                            that.taxamoLiabilityMessage(response.message)
                        }
                    }
                ).fail(
                    function (that,response) {
                        that.showTaxamoLiability(false)
                        that.taxamoLiabilityMessage('')
                    }
                );

                return true;
            },
            hashChangeHandler: function () {
                that.checkLiability();
            }
        });
    });

If there is a better way of fixing this please say. Thanks