Intranoggin

Blither, Blather, Web Content Management.
Blog » RequireJS in PhoneGap Gotcha

RequireJS in PhoneGap Gotcha

I just spend an embarrassing amount of time to debug an issue I hit when moving my html & javascript into a PhoneGap package.  Hopefully this saves somebody else the issue.

The problem was that when I moved my code into PhoneGap, none of my javascript files were loading properly.  After a bit of debugging, I realized the paths were not executing as expected in my requirejs config file.

In my working website, the paths in my config look like this:

requirejs.config({
    //By default load any module IDs from js/lib
    baseUrl: '/js/lib',
    //except, if the module ID starts with "nsm",
    //load it from the js/nsm directory. paths
    //config is relative to the baseUrl, and
    //never includes a ".js" extension since
    //the paths config could be for a directory.
    paths: {
        nsm: '/js/nsm'
    },<snip/>

Bringing that into PhoneGap though resulted in nothing loading for me. I made the mistake of removing the root / for my javascript paths.  That had the benefit of loading scripts from the baseUrl fine, but failed to load them from my nsm directory.

requirejs.config({
    //By default load any module IDs from js/lib
    baseUrl: 'js/lib',
    //except, if the module ID starts with "nsm",
    //load it from the js/nsm directory. paths
    //config is relative to the baseUrl, and
    //never includes a ".js" extension since
    //the paths config could be for a directory.
    paths: {
        nsm:'js/nsm'
    },<snip/>

Then I noticed the paths in my output window when the I pushed the app to my emulator.  (I’m developing this app in Visual Studio 2012 and debugging in the Windows 8 emulator.)

INFO: Writing data for /app/www\img\icons-18-black.png and length = 1767
INFO: Writing data for /app/www\img\icons-18-white.png and length = 1806
INFO: Writing data for /app/www\img\icons-36-black.png and length = 3611
INFO: Writing data for /app/www\img\icons-36-white.png and length = 3648

So my correct paths needed to be:

requirejs.config({
    //By default load any module IDs from js/lib
    baseUrl: '/app/www/js/lib',
    //except, if the module ID starts with "nsm",
    //load it from the js/nsm directory. paths
    //config is relative to the baseUrl, and
    //never includes a ".js" extension since
    //the paths config could be for a directory.
    paths: {
        nsm:'/app/www/js/nsm'
    },<snip/>

I had thought the www directory was the root in my PhoneGap app.  I was wrong.


Posted: 11/29/2012 4:35:00 AM by Ryan Miller | with 0 comments
Filed under: Mobile