Laravel 10 Vite Подключение скриптов\модулей\библиотек js

Обновляю проект на ларавел со старой версии до актуальной(10). При настройке шаблона встало 2 проблемы\задачи:

1. Ранее (в старом проекте) не использовался Vite
2. Многие библиотеки\скрипты подключались либо со сторонних ресурсов(пусть и надежных), либо лежали в папке public.

Т.к. обновление проекта было путем переноса\вписывание кода в чистый laravel 10, я верю, что с vite "из коробки" никаких проблем нет. Сразу проясню, что по фронтенд части я не очень силен. Осталось только правильно настроить vite и подключить библиотеки\модули. Но судя по всему здесь у меня проблемы.

Содержание vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/dropshipping.css', 'resources/js/dropshipping.js'],
            refresh: true,
        }),
    ],
});

Здесь менял только имя подключаемых файлов. Так же добавлял алиас для jQuery, но т.к. на результат не влияло - удалил.

В Шаблоне blade скрипты подключаются в конце, перед </body>

{{-- <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script> --}}
<script src="/libs/bootstrap/bootstrap.min.js"></script>
@vite(['resources/js/dropshipping.js'])

<script>
    setTimeout(function() {
        console.log(123123);
       console.log($);
    }, 5000);
 </script>

<script type="module">
    $(function () {
        console.log('Jquery loaded');
    });
</script>

То, что закомментировано - вариант подключения из старого проекта. То, что хочу перенести в vite \ подключение из модулей\библиотек. bootstrap - Аналогично из "старого подключения", так же в очереди на перенос.

Два скрипта - для проверки работы, что все подключилось (в данном случае jQuery).

Содержание dropshipping.js

/**
 * Подключаем Библиотеки
 */
import $ from "jquery";
window.$ = $;

import Swiper from 'swiper/bundle';
window.Swiper = Swiper

import select2 from 'select2';
select2();

import axios from 'axios';
window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Подключаем скрипты шаблона
 */
import './dropshipping/main.js';

Порядок библиотек сохранил тот же, что и в старом проекте, не считая bootstrap, который пока в очереди на правки, но на тестирование результата это не влияет. Все кастомные скрипты шаблона лежат в отдельной папке и собираются\подключаются в main.js .

Содержание файла package.json

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "laravel-vite-plugin": "^1.0.0",
        "vite": "^5.0.0"
    },
    "dependencies": {
        "axios": "^1.6.7",
        "bootstrap": "^5.3.2",
        "jquery": "^3.7.1",
        "select2": "^4.1.0-rc.0",
        "swiper": "^11.0.6"
    }
}

И собственно проблема В консоли я вижу сообщения:

Uncaught ReferenceError: $ is not defined

Uncaught ReferenceError: Swiper is not defined

Если использовать "старый" способ подключения jQuery - на странице ничего не ломается, 2 скрипта для проверки отрабатываю корректно, в консоли данных ошибок нет.

Папку node_modules удалял и заново все устанавливал. Перепробовал различные варианты подключения (через vite), но не 1 не помог. Были подозрения, что все из-за того, что скрипты (шаблона) подключаются из разных файлов, либо библиотеки подгружаются с задержкой. Но 2 скрипта в blade шаблоне доказывают, что библиотеки вообще не подгрузились.