Windows Phone 8 requirejs not loading modules

Question

Trying to port an iOS/Android Html5 App to WP8 using PhoneGap, Jquery Mobile and Requirejs.

App fails with a message suggesting that modules did not get loaded

Error:["Unable to get property 'debugging' of undefined or null reference file:x-wmapp0:www/scripts/main.js Line:60","DebugConsole404227917"]

This message says that the Config object is null that comes from the Config.js.

I think this problem is caused by the wrong relative paths of the modules, that for some reason are different in WP8, however I can't find the right combination.

Does anybody have any experience with requirejs on WP8 ? I did a lot of searching but nothing that I found(which wasn't a lot) seems to help.

The main.js file loaded by require.js, the file itself gets executed and debug message come out of it but not from the require.function(..) block.

I am using requirejs(2.1.8) and jquery-mobile(1.3.1) and phonegap(2.9.0)

require.config({
    // modules
    paths: {
        'domReady'                : 'vendor/domReady',
        'jquery'                  : 'vendor/jquery.min',
        'jquery.mobile'           : 'vendor/jquery.mobile-1.3.1.min',
        'handlebars'              : 'vendor/handlebars',
        'AppHistory'              : 'modules/AppHistory',
        'CatalogController'       : 'modules/CatalogController',
        'CleaningController'      : 'modules/CleaningController',
        'Config'                  : 'modules/Config',
        'Consultants'             : 'modules/Consultants',
        'CoverageController'      : 'modules/CoverageController',
        'ExternalDataHandler'     : 'modules/ExternalDataHandler',
        'Languages'               : 'data/LanguageData',
        'LanguageController'      : 'modules/LanguageController',
        'LocalStorage'            : 'modules/LocalStorage',
        'ProductDetailController' : 'modules/ProductDetailController',
        'Scanner'                 : 'modules/BarcodeScanner',
        'SeminarController'       : 'modules/SeminarController',
        'SeminarDetailController' : 'modules/SeminarDetailController',
        'TechnicalRequest'        : 'modules/TechnicalRequest',
        'TemplateEngine'          : 'modules/TemplateEngine'
    },
    // dependencies
    shim: {
        'jquery' : {
            exports: 'jQuery'
        },
        'jquery.mobile' : ['jquery'],
        'handlebars' : {
            exports: 'Handlebars'
        }
    },
    urlArgs: 'rev=v3'    // production setting
    // urlArgs: 'rev=' + (new Date()).getTime()    // development setting
});

require(['domReady', 'jquery', 'app', 'Config', 'jquery.mobile'],
    function(domReady, $, App, Config) {

        'use strict';

        if (Config.debugging || window.location.search.match(/debug/)) {
            // for production enable debug mode by get param "?debug=true"
            debug = true;
        }

        // domReady is RequireJS plugin that triggers when DOM is ready
        domReady(function () {

            function onDeviceReady(desktop) {

                // Hiding splash screen when app is loaded
                if (desktop !== true) {
                    cordova.exec(null, null, 'SplashScreen', 'hide', []);
                }

                Config.platform = (window.device && window.device.platform) ? window.device.platform : 'WebApp';
                Config.eventType = 'click';    // kein touchevent mehr verwenden

                // globale Konfiguration für jQuery und jQuery Mobile
                $.support.cors = true;
                $.mobile.ajaxEnabled = false;
                $.mobile.allowCrossDomainPages = true;
                $.mobile.defaultPageTransition = 'fade';
                $.mobile.hashListeningEnabled = false;
                // $.mobile.linkBindingEnabled = false;
                $.mobile.pushStateEnabled = false;
                $.mobile.touchOverflowEnabled = true;

                App.initialise(desktop);

            }

            /*
            Wir checken nicht nur, ob es sich um ein mobiles Gerät handelt, sondern
            ob auch Phonegap aka Cordova initialisiert ist, sprich mit der nativen
            API und somit dem mobilen Endgerät spricht.
            */
            if (window.device && window.device.platform && window.device.platform.match(/Android|iOS|Win32NT/)) {
                // This is running on a device so waiting for deviceready event
                document.addEventListener('deviceready', onDeviceReady, false);
            } else {
                // On desktop don't have to wait for anything
                onDeviceReady(true);
            }

        });

    }
);

I discovered that if I ommit the "shim" configuration the modules get loaded — Leon Gereon, Jul 12 '13 at 14:45
Seems it all boiled down to the line [urlArgs: 'rev=v3'] in the shim config and a few minor structual changes in the project. A bare-bones requirejs+cordova+WP8 seems to work just fine anyway. — Leon Gereon, Jul 12 '13 at 15:42
In case you really need to pass a parameter to your html page : http://stackoverflow.com/questions/13577114/how-to-pass-a-parameter-to-a-local-html-page-in-wp7-wp8/13591073#13591073 — Sergei Grebnov, Oct 18 '13 at 09:57

Windows Phone 8 requirejs not loading modules

0 Answers0