Trouble with RequireJS optimizer config, bbb release

Question

I'm using RequireJS, backbone boilerplate with layout manager, JamJS to help manage packages, and everything works fine in development, but when I try to create a production version with concatenated files it doesn't work.

It looks like the shim in my config might not be getting loaded. For example, the error I get in my console is Uncaught TypeError: Cannot set property 'cookie' of undefined, so jQuery is not getting loaded as a dependency for the jquery.cookie. Here's my app config:

// Set the require.js configuration for your application.
require.config({

  // Initialize the application with the main application file and the JamJS
  // generated configuration file.
  deps: ["../vendor/jam/require.config", "main"],

  paths: {
    baseUrl : '/',
    config : "config",

    // JavaScript folders.
    api : "libs/api",
    app : "app",

    // Libraries.
    almond : "../vendor/jam/js/libs/almond",
    engagement : "libs/engagement",
    environment : "libs/environment",
    jquery : "../vendor/jam/jquery/jquery",
    jqueryui : "../vendor/js/libs/jquery-ui-1.9.1.custom.min",

    "jquery-cookie" : "../vendor/jam/jquery-cookie/jquery.cookie",

    chosen : "../vendor/js/libs/jquery.chosen.min",
    colorpicker : "../vendor/js/libs/jquery.colorpicker",
    bootstrap : "../vendor/js/libs/bootstrap",
    jqueryuiwidget : "../vendor/js/libs/jquery.ui.widget",

    jstemplates : "../vendor/js/libs/tmpl",
    jsloadimage : "../vendor/js/libs/load-image",
    jscanvastoblob : "../vendor/js/libs/canvas-to-blob",
    iframetransport : "../vendor/js/libs/jquery.iframe-transport",
    fileupload : "../vendor/js/libs/jquery.fileupload",
    fileuploadfp : "../vendor/js/libs/jquery.fileupload-fp",
    fileuploadui : "../vendor/js/libs/jquery.fileupload-ui",
    fileuploadlib : "libs/fileupload",

    highchartsgraytheme : "../vendor/js/libs/gray",
    highchartsexporter : "../vendor/js/libs/exporting",

    adpin : "libs/adpin",

    val : "../vendor/js/libs/jquery.validate.min",
    valmethods : "../vendor/js/libs/additional-methods.min",

    advertiser : "libs/advertiser",
    messages : "libs/messages",

    user : "libs/user",
    zeroclipboard : "../vendor/js/libs/zero-clipboard",

    jqgrid : "../vendor/js/libs/jquery.jqGrid.min",
    jqgridsource : "../vendor/js/libs/grid.locale-en",

    reporting : "libs/reporting",
    adlift : "libs/adlift",
    utilities : "libs/utilities",
    qrcode : "../vendor/js/libs/jquery.qrcode.min",
    base64 : "../vendor/js/libs/base64",

    kinetic : "../vendor/js/libs/kinetic.min",
    canvaslib : "libs/canvas",

    socialstream : "libs/socialstream",
    analytics : "libs/analytics",

    classie : "../vendor/js/libs/classie",

    classie_modernizr : "../vendor/js/libs/modernizr.custom",

    qtip2 : "../vendor/js/libs/jquery.qtip",

    sponsored : 'libs/sponsoredcontent',

    publisher : 'libs/publisher',

    xml : '../vendor/jam/codemirror3/mode/xml/xml'
  },

  shim: {

    "jquery-cookie" : {
        deps : ["jquery"]
    },

    "api" : {
        deps : ["environment"]
    },

    "xml" : {
        deps : ["codemirror3"]
    },

    "classie" : {
        deps : ["classie_modernizr"]
    },

    "jqueryui" : {
        deps : ["jquery"]
    },

    "colorpicker":{
        deps : ["jquery"]
    },

    "jqueryuiwidget" : {
        deps : ["jquery"]
    },

    "jstemplates" : {
        deps : ["jquery"]
    },

    "jsloadimage" : {
        deps : ["jquery"]
    },

    "jscanvastoblob" : {
        deps : ["jquery"]
    },

    "fileupload" : {
        deps : ["jquery", "jqueryuiwidget"]
    },

    "fileuploadfp" : {
        deps : ["jquery", "jscanvastoblob", "fileupload"]
    },

    "fileuploadui" : {
        deps : ["jquery", "jstemplates", "jsloadimage", "fileuploadfp", "fileuploadlib"]
    },

    "qrcode" : {
        deps : ["jquery"]
    },

    "base64" : {
        deps : ["jquery"]
    },

    "highchartsgraytheme" : {
        deps : ["highcharts"]
    },

    "highchartsexporter" : {
        deps : ["highcharts"]
    },

    "utilities" : {
        deps : ["lodash", "jquery", "val"]
    },

    "val" : {
        deps : ["jquery"]
    },

    "valmethods" : { 
        deps: ["jquery", "val"]
    },

    "zeroclipboard": {
        deps : ["jquery"]
    },

    "jqgrid" : {
        deps : ["jquery", "jqgridsource"]
    },

    "jqgridsource" : {
        deps : ["jquery"]
    },

    "bootstrap" : {
        deps : ["jquery"]
    }
  }

});

Here's how I load up my require.js file:

<script data-main="/app/config" src="/dist/debug/require.js"></script>

Any ideas on what might be going on? When I use bbb release, everything completes without an error to create that debug file.

Answer 1

Evan, I'm not sure exactly what your issue is. I'd recommend moving away from JamJS in favor of Bower for this. Who knows, maybe the build in Jam is busted.

Your shim looks correct, but I'm wondering if you have the mainConfigFile option set in your Gruntfile.js file under the requirejs section.

The bbb command has been deprecated, so I would encourage you to investigate https://github.com/backbone-boilerplate/backbone-boilerplate/wiki/Installation our generator should serve your needs nicely!

Answer 2

I have some suggestions, this might sound stupid, but since I don't have my hands on the file guessing is the best I can do, so, make sure that there is no: define(["jquery"], ..... in your jquery-cookie file, because you should either include it in shim or with this define but not both because it may cause a conflict. if it worked let me know to add an explanation of why this happened, best of luck.