MathJax and Knockout.js ko.bindingHandlers

Question

I have been trying to get Mathjax to work with Knockout and I am almost there.

My binder looks like this

ko.bindingHandlers.mathjax = {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = valueAccessor(), allBindings = allBindingsAccessor();

        var valueUnwrapped = ko.unwrap(value);
        $(element).html(valueUnwrapped);   

        MathJax.startup.promise.then(() => {
            MathJax.typesetClear([$(element)[0]]);
            MathJax.typeset([$(element)[0]]);
        });           
    }
};        

This is working and typesets the formulas when the observables change but it fails if I reload the page a few times. The error is

Message: Cannot read properties of undefined (reading 'promise')

I gather this is something to do with sequencing. Any help would be appreciated.

I tried configuring the MathJax promises but it either had no effect or made it worse.

Update:

A reply by @NullDev to another issue appears to be the solution.

MathJax.startup = {
    ready() {
        MathJax.startup.defaultReady();
        MathJax.startup.promise.then(() => {
            MathJax.typesetClear([$(element)[0]]);
            MathJax.typeset([$(element)[0]]);
        });
    }
};

is working for me now :)