How to use jquery ui with requireJS and knockout-s

Question

I'm trying to use requireJS to manage dependencies in my first ever single-page javascript app. Having never used requireJS before, I'm struggling with something that I think is quit basic.

My project uses knockoutJS, and an addon called knockout-sortable, which provides knockout bindings for the jquery ui 'sortable' plugin. It all works fine when I just load jquery ui, knockout and everything else without requireJS.

My require main.js looks like this:

require.config({
    baseUrl: '/Scripts',
    paths: {
        jQuery: 'jquery-2.1.3',
        jQueryUI: 'jquery-ui-1.10.2',
        knockout: 'knockout-3.3.0',
        knockoutSortable: 'knockout-sortable',
        AppViewModel: 'app/AppViewModel'
    },
    shim: {
        "jQueryUI": {
            export: "$",
            deps: ['jQuery']
        },
        "knockoutSortable": {
            export: ["ko"],
            deps: ['jQuery','jQueryUI']
        },
    }
});


require(['jQuery', 'jQueryUI', 'knockoutSortable', 'AppViewModel'], function ($, ui, ko, AppViewModel) {
    ko.applyBindings(new AppViewModel());
});

But I get an error in my javascript that states:

GET http://localhost:8020/Scripts/jquery-ui/draggable.js 
require.js:166 Uncaught Error: Script error for: jquery-ui/draggable
http://requirejs.org/docs/errors.html#scripterror
require.js:1910 GET http://localhost:8020/Scripts/jquery-ui/sortable.js 
require.js:166 Uncaught Error: Script error for: jquery-ui/sortable
http://requirejs.org/docs/errors.html#scripterror

I'm guessing that knockout-sortable somehow requires the dependency jquery.ui/sortable.js, but that file doesn't exist, since jquery-ui is only one file!

This page https://learn.jquery.com/jquery-ui/environments/amd/ also suggests that I should organize my jquery ui files into some kind of folder structure, but I just have one jquery ui file, so I have no idea how to do that.

By the way: I'm using ASP.NET MVC 5 in visual studio, that why my scripts are in a 'Script' folder and not in a 'JS' folder. I've updated jquery, jquery ui and knockout to the latest versions using NuGet, and I've manually upgraded knockout-sortable to version 0.11, since that was released 4 days ago and is not yet available on nuget.

Does someone know what is going on here and how to fix it?

Answer 1

You can get the AMD modules when installing jquery-ui with bower or download them from github.

After you have the files you need, remove the shim config for jquery-ui since that should be used only for non-AMD scripts.

knockout-sortable is also an AMD module so you don't need any shim config.