Why is jQuery UI Sortable Failing in My Laravel Vite Setup?

It’s most likely a loading and instance conflict issue between jQuery and jQuery UI when using Vite’s module system. With the old Blade/CDN approach, you were relying on a globally available jQuery instance—something that Vite’s module bundling doesn’t do by default.

Why This Happens

1. jQuery Instance Mismatch
   When you import jQuery via Vite (e.g., using import $ from 'jquery';), that instance isn’t automatically assigned to the global scope. jQuery UI (and its sortable widget) attaches itself to the global jQuery variable. Without that, calling $(…).sortable() won’t find the method.

2. jQuery UI Dependency Order
   The sortable widget depends on the mouse widget to exist. If these aren’t imported in the proper order, you might see errors like “Cannot read properties of undefined (reading 'mouse')”.

How to Fix It

You should ensure that the same jQuery instance is available globally and load the jQuery UI dependencies in the correct order. For example, in your Vite entry file (or the module where you set up your grid):

JSCopied
import $ from 'jquery';

// Assign to the global window object so that plugins can attach
window.$ = $;
window.jQuery = $;

// Import jQuery UI dependencies in order
import 'jquery-ui/ui/widgets/mouse';     // Needed by sortable
import 'jquery-ui/ui/widgets/sortable';   // Now sortable can attach to the global jQuery

// Your custom JS code
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);
                    // Additional code here...
                }
            }
        });
    });
}

Additional Tips

• Avoid Mixing CDN and Vite Bundling:
  Mixing CDN-loaded jQuery with a Vite-imported version can lead to duplicate instances. Stick with a single approach—in this case, managing jQuery via npm and Vite.

• Check Your Build Order:
  Ensure that this setup code runs before any other JavaScript that attempts to use .sortable().

• Vite Config (Optional):
  Alternatively, you can configure Vite to auto-inject jQuery globally using plugins like vite-plugin-legacy or by adding a manual alias in your vite.config.js if needed.

By ensuring that jQuery is global and loading the jQuery UI dependencies in the right order, your sortable functionality should work just as it did in your previous setup.