jqgrid sortable library not correctly loading to my node.js-fuelled front-end

Question

I have a web-app running on laravel-blade as front-end (and laravel as back-end obviously but this is not the case) and I recently decided to move all my javascript content from the blade files to the the vite server that laravel provides for front-end. So now all my javascript scripts run on that vite server which mostly worked as intended with one exception.

I have a grid which works with jquery sortable which, until I migrated my javascript to the vite server worked as intended but it seems it is not able to load the jqsortable libraries correctly, as a result, I cannot drag and drop any "pawn" inside my grid table.

initial error:

c(...).sortable is not a function

Things I tried:

npm install jquery-ui

entering

import $ from 'jquery';
import 'jquery-ui/ui/widgets/sortable';

to the script, but then the script gives me this error:

Cannot read properties of undefined (reading 'mouse') (???)

Some more infos: Yesterday I tried somehow importing the 'mouse' library and it gave me error that he could not find "widget", I imported the widget library to the script and then there was no error but I could not drag and drop the pawns still.

I gave up on this and I tried to insert the libraries to from the blade file with cdn like I used to while it was working:

<div class="grid"></div>
<div class="characters"></div>
@vite(['resources/css/characterGridStyle.css'])
@vite(['resources/js/characterGridFunctions.js'])
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

again this error appears:

c(...).sortable is not a function

jquery version on my npm is 3.7.1 jquery version on cdn is also 3.7.1

This is part of the code which calls the sortable method for more help (i repeat, it used to work as intended before the migration so i reckon the code itself is not the problem):

export async function refreshGrid() {
    getCharacterPositions().then(characterjson => {
        $('.grid').empty().css(`grid-template-columns`, `repeat(${gridSize}, 3.7rem)`)
            .html([...Array(gridSize**2)].map((i, j) => {
                let cellContent = '';
                characterjson.forEach(character => {
                    let [x, y] = character.coords.split(',');
                    if (parseInt(x) === j % gridSize && parseInt(y) === Math.floor(j / gridSize)) {
                            cellContent += `<div class="character"><div class="stats" id="${character.id}"><p>${character.nickname}</p><p>hp: ${character.hp}</p></div></div>`;
                    }
                });
                return `<div class="cell">${cellContent}</div>`;
            }).join(''));
            $('.grid .cell').sortable({
                connectWith: '.characters, .grid .cell',
                cursor: 'grabbing',
                receive: (e, ui) => {
                    if(ui.item.parent().hasClass('cell')) {
                        let $cell = $(e.target),
                       [...]
                    }
                }
            });

}