Laravel Vite迁移后jQuery Sortable无法正常加载的技术求助

我使用Laravel作为后端，前端基于Blade模板，近期将所有JavaScript代码从Blade文件迁移至Laravel自带的Vite服务器后，多数功能正常，但基于jQuery Sortable实现的网格组件出现异常——无法拖拽网格内的"pawn"元素。

初始报错 #

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

已尝试的解决步骤 #

• 通过npm install jquery-ui安装依赖，导入代码如下：

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

  执行后出现新报错：Cannot read properties of undefined (reading 'mouse')
• 尝试额外导入mouse和widget核心库后，报错消失，但拖拽功能仍未恢复
• 改用CDN引入jQuery（3.7.1）和jQuery-ui（1.12.1），依旧触发最初的sortable is not a function错误

迁移前该功能完全正常，以下是调用Sortable的关键代码片段：

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),
                       [...]
                    }
                }
            });
}

内容的提问来源于stack exchange，提问作者Scarlet D.