r.js not compiling shimmed scripts properly-Collection of common programming errors

I’m able to successfully compile my JS modules via Grunt’s requirejs task, but I’m getting undefined with any shim scripts. Here is my config

requirejs.config({
    "baseUrl": "../../../components/",
    "paths": {
        "less": "less.js/dist/less-1.3.3",
        "datepicker": "jquery-ui/ui/jquery.ui.datepicker",
        "jquery": "jquery/jquery",
        "jqueryui": "jquery-ui/ui/jquery-ui",
        "spectrum": "spectrum/spectrum",
        "class": "class/class",
        "underscore": "underscore-amd/underscore",
        "d3": "d3/d3",
        "nv": "nvd3/nv.d3",
        "dataTables": "datatables/dataTables"

    },
    shim: {
        less: {
            exports: "less"
        },
        jqueryui: {
            exports: "jqueryui"
        },
        spectrum: {
            exports: "spectrum"
        },
        class:{
            deps: [ 'jquery'],
            exports: "class"
        }
    }   
})

Here is my requirejs config from my Gruntfile:

requirejs: {
    dist: {
        options: {
            mainConfigFile: 'src/scripts/main.js',
            out: '/scripts/main.js',
            paths:{
                "main" : "../final/src/scripts/main"
            },
            include:['main'],
            preserveLicenseComments: false,
            useStrict: true,
            wrap: true
        }
    }
}

Now when I run grunt requirejs:dist It compiles just fine, and does include my shimmed files. But whenever I try to run the compiled JS, access to any of my shimmed scripts are undefined.

1. Not sure what you mean by “access to any of my shimmed scripts are undefined”. You need to ensure that shimmed scripts are included in correct order. Also you may try defining fake module for that script. In you build JS configuration add:

   onBuildRead: function (moduleName, path, contents) {
       if (moduleNam === 'spectrum'){
           contents += '; define(' + moduleName + ', function(){ return window.spectrum; });';
       }
       return contents;
   }
   

   You need to understand, what exports does. After script is loaded it will look for that variable in a global namespace. I don’t think there is ‘jqueryui’ namespace. So it will always be undefined, because it has to load after jQuery and it just extends jQuery, so module can not return anything useful.

   I hope that helps.