I'm trying to follow the example in https://mdbootstrap.com/docs/standard/forms/datetimepicker/ to use custom formatting for my datetimepicker.

<script type="module">
    $(document).ready(function () {

        const NextEventAtPicker = document.querySelector('#BSRSchedule_NextEvent');
        new mdb.Datetimepicker(NextEventAtPicker, {
            datepicker: { format: 'm-d-yyyy' },
        });
    }
</script>

and

<div class="form-group datetimepicker" data-mdb-inline="true">
    <label asp-for="BSRSchedule.NextEvent" class="control-label"></label>
     <input type='text' asp-for="BSRSchedule.NextEvent" class="form-control" readonly disabled=@readOnly />
</div>

I get the following errors:

jquery.min.js:2 jQuery.Deferred exception: mdb.Datetimepicker is not a constructor TypeError: mdb.Datetimepicker is not a constructor

and

Uncaught TypeError: mdb.Datetimepicker is not a constructor

This is an ASP.NET Razor Pages project. I have tried using Webpack to bundle my mbd, but currently I'm using the js files directly from the downloaded MDB5-STANDARD-UI-KIT-Pro-Essential-6.4.0. (I have retained the css files generated with my SCSS updates.)

I load mdb using:

<script type="text/javascript" src="~/lib/mdb/dist/js/mdb.min.js"></script>

I've tried variations of the "importing JS modules" instructions at : https://mdbootstrap.com/docs/standard/pro/installation/ but they haven't worked for me.

I'm probably missing something obvious, but I can't find it.