Optimising requirejs with r.js causes undefined errors

Question

I'm working with requirejs and I have a working application but on running the r.js optimiser I find it impossible to not return any undefined errors in the compiled script.

The errors are all on load and are similar to:

Uncaught TypeError: undefined is not a function

Before optimising I have 0 errors and everything works as expected, but on running r.js with the following build file I get an undefined js error on loading the file.

Is there something I am doing wrong in my build file? I am using a couple of plugins in my application but as the shim is configured and working before optimisation I am pretty confused as to why this would break.

One side note is that r.js was not including require.js which was causing an issue, to resolve I included require.js manually before the main script was called which looked to fix the problem but in all honestly it's pretty hard to tell what the issue is!

Thanks for taking a look! :)

main.js:

require.config({
    baseUrl: "*my base url*",
    shim: {
        jquery: {
            exports: 'jQuery'
        },
        parsley: {
            deps: ["jquery"]
        },
        marquee: {
            deps: ["jquery"]
        },
        'facebook' : {
            exports: 'FB'
        }
    },

    paths: {
        jquery: [
            "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min",
            "vendor/jquery"
        ],
        parsley: "vendor/parsley",
        marquee: "vendor/jquery.marquee.min",
        'facebook': '//connect.facebook.net/en_US/all'
    },

    waitSeconds: 0
});

requirejs(['jquery', 'modules/log', 'modules/util', 'modules/youtube/youtube', 'modules/ticker', 'parsley', 'modules/fb'
], function ($, log, util) { 

*app stuff* 

});

build configuration:

({
    appDir: './',
    baseUrl: './',
    dir: './dist',
    modules: [
        {
            name: 'main',
        }
    ],
    fileExclusionRegExp: /^(r|build)\.js$/,
    optimizeCss: 'none',
    optimize: "none",
    removeCombined: true,
    paths: {
        jquery: "empty:",
        facebook: "empty:"
    },
    shim: {
        jquery: {
            exports: 'jQuery'
        },
        'facebook' : {
            exports: 'FB'
        }
    }
})

Answer 1

Two issues in your configuration which will cause mysterious problems:

1. jQuery 1.9.1 does not need a shim. Remove the shim you've set for it. The way to know is to look at the source code of the library you want to use with RequireJS. Libraries designed to work with RequireJS will call define themselves. Don't assume the call will be the first thing in the file. In the case of JQuery, the call is towards the end. Search for it.

2. In your build configuration (which you pass to r.js), use mainConfigFile to point to your run-time configuration (main.js, in your case). The optimizer needs to have the exact same shim configuration as what is in your run-time configuration. Currently the list of shims in your build config is not complete.

Answer 2

Solution:

Thanks to Louis I was able to resolve my undefined issues. There were a number of problems:

1. I had a shim for jquery 1.9.1 which was not required as Louis pointed out
2. I had an incomplete deploy file, using the mainConfigFile property to duplicate my main.js configuration was a nice easy way to sort that.
3. I had two plugins which were causing issues, one was AMD compliant and the other was not.

To resolve the deploy script issues I just needed to remove the shim for jquery and parsley as they are both compliant so do not need a shim and match the main.js config using mainConfigFile.

This will cause a error when you run r.js in terminal / cmd as jquery is located from a CDN. To fix that issue just add 'jquery' : 'empty:' to your paths property in your build.js. This will override the main.js config allowing r.js to continue.

To resolve the plugin errors I just needed to wrap both plugins with a define method as you would your own modules, no need to return anything, just make sure you have listed the dependencies.

Final source:

main.js

require.config({
    baseUrl: "*my base url*",
    shim: {
        'facebook' : {
            exports: 'FB'
        }
    },
    paths: {
        jquery: [
            "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min",
            "vendor/jquery"
        ],
        parsley: "vendor/parsley",
        marquee: "vendor/jquery.marquee.min",
        'facebook': '//connect.facebook.net/en_US/all'
    },

    waitSeconds: 0
});

build.js

({
    appDir: './',
    baseUrl: './',
    dir: './dist',
    modules: [
        {
            name: 'main',
        }
    ],
    fileExclusionRegExp: /^(r|build)\.js$/,
    optimizeCss: 'none',
    removeCombined: true,
    mainConfigFile: './main.js',
    paths: {
        "jquery": "empty:"
    }
})

plugin example:

define(['jquery'], function (jQuery) {
     *some jquery plugin code*
});