HubSpot Sortable Library Error - Cannot Access Sortable Object in jQuery Application

Other Questions HubSpot
1

I’m working on a web app where I need to create table rows dynamically and make them sortable. I’m using the HubSpot Sortable library but keep getting an error that says the Sortable object is not defined. The JavaScript file is loading properly as far as I can tell, but when I try to call the methods it throws a ReferenceError.

Error message:

ReferenceError: Sortable is not defined

My code setup:

// HTML head includes
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="/static/js/sortable-lib.js"></script>

// Main JavaScript
$(document).ready(function() {
    $("#loadData").click(function() {
        $.ajax({
            url: "/api/data/",
            method: "GET",
            dataType: "json",
            success: function(response) {
                $('#content-area').empty();
                
                var activeIcon = '<span class="status-active">●</span>';
                var inactiveIcon = '<span class="status-inactive">○</span>';
                
                $('#content-area').append("<table class='data-table' id='sortable-table'><thead><tr><th>Server Name</th><th>Status</th><th>Actions</th></tr></thead><tbody>");
                
                for (var i = 0; i < response.servers.length; i++) {
                    var server = response.servers[i];
                    var statusIcon = server.active ? activeIcon : inactiveIcon;
                    $('#sortable-table tbody').append('<tr><td>' + server.name + '</td><td>' + statusIcon + '</td><td>' + server.commands + '</td></tr>');
                }
                
                // This is where the error occurs
                Sortable.init();
                var tableElement = document.querySelector('#sortable-table');
                Sortable.initTable(tableElement);
            }
        });
    });
});

I’ve tried calling Sortable.init() and also tried without it, but both approaches give me the same undefined error. Has anyone experienced this issue with the HubSpot Sortable library before?

2

This looks like an API exposure issue with the HubSpot Sortable library. The library doesn’t always create a global Sortable object by default - you might need to initialize it differently or check if it’s namespaced under hs.sortable or HubSpot.sortable. Another common issue: you might’ve downloaded the wrong sortable library. I’ve seen devs grab a different one thinking it’s HubSpot’s. Double-check that your sortable-lib.js is actually from HubSpot’s collection. Try console.log(window) and look for any sortable-related objects in the global scope. You’ll probably find it’s available under a different name. Also, some versions need explicit initialization with specific parameters instead of just calling init() with no arguments.

3

Had this exact problem a few months ago! It’s a timing issue with library initialization. The HubSpot Sortable library needs the DOM fully loaded before you can access the Sortable object. Since you’re creating table content dynamically with AJAX, you’ve got a race condition.

I fixed it by wrapping the Sortable calls in setTimeout with a small delay - lets everything render properly first. Also check that your sortable-lib.js is actually the HubSpot library and not some other sortable implementation. Different libraries initialize differently.

Try adding console.log right before Sortable.init() to see if the object exists at that point.