Question

I have an ASP.NET Web API single page application (all HTML5/CSS3/JavaScript talking to the Web API only to transfer JSON data) that was working with require.js v2.0.4, knockout.js v2.2.0, and jQuery Mobile v1.2.0. Using Nuget, I upgraded to the latest version of require.js (v2.1.1). (Note: I’m using only require.js. I removed r.js. I never needed it in the past, which was just a day ago.) And, now my application doesn’t work correctly.

On the Network tab of the browser’s tools, I can see that the scripts are being downloaded in the correct order (i.e., jquery, jquery.mobile, other scripts including knockout.js, and then require.js). But, on the error console, I’m seeing the following errors:

require.js line 1746
Error: Mismatched anonymous define() module: function ($) {
            factory( $, root, doc );
            return $.mobile;
        }

require.js line 1746
Mismatched anonymous define() module: function (koExports) {
// Internally, all KO objects are attached to koExports (even the non-exported ones whose names will be minified by the closure compiler).
// In the future, the following "ko" variable may be made distinct from "koExports" so that private objects are not externally reachable.
var ko = typeof koExports !== 'undefined' ? koExports : {};
(a lot more error message here – left out for brevity)

Is there a compatibility problem with the latest versions of require.js, knockout.js, and jQuery Mobile?
Has anyone else had issues/errors with this same stuff?
How can I make all these 3rd party JavaScript libraries work together?

Thanks.

Answer 1

I believe I got it working. I had misplaced data- attributes for page and content (jQuery Mobile stuff). I don’t know why I got the knockout error too. But, oh well. Now I’m on to the next issue — getting sammy.js (used only for hash-based navigation) and jQuery Mobile to play nicely together (if it’s even possible…).
Thanks.