Are there Package Incompatabilities with Vite or Laravel Module Sysems in General?

I have taken a bare-bones Laravel project and have been trying to teach myself how to use Vite. I have tried testing it with numerous packages I use on a regular basis, but I have run into enormous headaches with some of them. For instance.. jQuery, sweetalaert2, chart.js, and jquery-datetimepicker all seem to work. But when I try to add select2 or chosen-js, I get all sorts of errors with jQuery suddenly not being loaded. I have tried everything I know, including making sure jQuery loads first.

Is it worth it to move to Vite? Should I stick with Laravel Mix? Or should I just do it the old-fashioned way by putting the plugins in a public directory? Right now, I am doing it the old-fashioned way, but I thought I would try it the Laravel way.

This is my app.js file that gets broken as soon as I add "import 'chosen-js';" The error occurs on the build file and appears as "Uncaught ReferenceError: jQuery is not defined"

import Swal from 'sweetalert2';
import Chart from 'chart.js/auto';

import $ from 'jquery';
window.$ = window.jQuery = $;

import 'jquery-datetimepicker'; // Import DateTimePicker
import 'bootstrap';
import 'chosen-js/chosen.css'; // Import Chosen CSS
import 'chosen-js';


window.Chart = Chart; // Make Chart.js globally accessible

$(document).ready(function () {
    console.log("✅ jQuery Loaded:", typeof $);
    console.log("✅ SweetAlert2 Loaded:", typeof Swal);
    console.log("✅ DateTimePicker Loaded:", typeof $.fn.datetimepicker);
    console.log("✅ Chart.js Loaded:", typeof Chart);

    console.log("✅ Checking Chosen:", typeof $.fn.chosen);
    $(function() {
        console.log("jQuery2 is working!");
    });
// Check if jQuery is loaded
    if (typeof $ !== "undefined") {
        console.log("✅ jQuery is loaded on app.js!");

        // Check if Chosen is loaded
        if (typeof $.fn.chosen !== "undefined") {
            console.log("✅ Chosen is loaded on app.js!");
            $('.chosen-select').chosen();
        } else {
            console.error("❌ Chosen is NOT loaded on app.js!");
        }
    } else {
        console.error("❌ jQuery is NOT loaded on app.js!");
    }

    // Example of SweetAlert2 (Uncomment if needed)
    // Swal.fire({
    //     title: 'SweetAlert2 Test',
    //     text: 'If you see this popup, SweetAlert2 is working!',
    //     icon: 'success',
    //     confirmButtonText: 'OK'
    // });
});

If I remove it and rebuild it, everything works again. Even if I strip is down to just:

import $ from 'jquery';
window.$ = window.jQuery = $;
import 'chosen-js/chosen.css'; // Import Chosen CSS
import 'chosen-js';

I still get the jQuery is undefined error. Very frustrating.