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.

I didn't dive in too deep, but at first glance, "jquery-cookie" is the only library with quotes around the name. perhaps it is an easy fix like that?? — panzhuli, Sep 25 '13 at 14:26
@juliep nah thats not the problem. the quotes just preserve that object property. I changed it to be the same as the others just in case, still the same issue — Evan, Sep 26 '13 at 15:27
Can you please provide the JamJS configuration file + your main RequireJS config? Also, is your jQuery dependency being registered in the global namespace as "$" and "jQuery" or do you only get access to it by doing require('jquery')? If it's the latter, check jQuery-cookie and make sure it has no reliance on "$". If it does, go with @Blacksonic's reply — bjornl, Oct 02 '13 at 04:56

score 3 · Accepted Answer · answered Sep 28 '13 at 19:55

3

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.

answered Sep 28 '13 at 19:55

Labib Ismaiel

1,240
2
11
21

this was basically the issue. there was conflict with define jquery and my exported jquery – Evan Oct 02 '13 at 20:36

score 2 · Answer 2 · answered Oct 01 '13 at 20:16

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!

Trouble with RequireJS optimizer config, bbb release

2 Answers2