daterangepicker is not a function error on Laravel 9 and Vite

Question

I am trying to get daterangepicker to work on my Laravel 9 project with vite.

This is my app.js file:

import './bootstrap.js';
import 'daterangepicker/daterangepicker.js';
import 'moment/moment.js';

import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;

import moment from 'moment';
window.moment = moment;

import daterangepicker from 'daterangepicker';
window.daterangepicker = daterangepicker;   

And this is how I call my daterangepicker:

$('input[name="teamFilterDateRange"]').daterangepicker();

The error I see is:

Uncaught TypeError: $(...).daterangepicker is not a function.

It seems as though the window.daterangepicker code doesn't bind to the window. Vite does build fine without any errors, so I believe it does import correctly.

If I move this line into my app.js file:

$('input[name="teamFilterDateRange"]').daterangepicker();

I get a different error:

TypeError: moment is not a function

I would like to make daterangepicker globally available so I can use it in external js files if that's possible.

UPDATE:

So I have found the issue with the error below:

Uncaught TypeError: $(...).daterangepicker is not a function.

Initialising my date picker within a $.document.ready() function resolved the issue. Now I'm unable to initialise the moment library which the date picker needs and I get the following error:

Uncaught TypeError: moment is not a function