Require.js + TypeError: Backbone is undefined after optimization

Question

Backbone app works fine pre-optimized. After using r.js (with almond), I succesfully generate a single output file that always seems to throw the 'TypeError: Backbone is undefined' error in the module immediately following backbone.

For example, when the output from r.js looks like this:

/consumer/public/javascripts/vendor/almond.js
/consumer/public/javascripts/vendor/jquery-1.7.2.js
/consumer/public/javascripts/vendor/underscore.js
/consumer/public/javascripts/vendor/bootstrap.js
/consumer/public/javascripts/vendor/backbone.js
/consumer/public/javascripts/rjs/src/mnp/prop_m.js
/consumer/public/javascripts/rjs/src/mnp/prop_c.js
/consumer/public/javascripts/vendor/play-mustache.js
...
/consumer/public/javascripts/main.js

Upon loading the optimized file in the browser, the error above will be thrown in the 'prop_m.js' module when referencing Backbone. Using require 2.0.5, Backbone 0.9.2, and almond 0.1.4. Thanks in advance for any help.

PS: build.js looks like this:

    ({
    baseUrl:   "./",
    mainConfigFile: "main.js",
    paths: {
    'almond': 'vendor/almond',

        // need a path to the cs-compiled .js file
        'app' : '../../target/scala-2.9.1/resource_managed/main/public/javascripts/rjs/src/app',
        'mnp/router' : '../../target/scala-2.9.1/resource_managed/main/public/javascripts/rjs/src/mnp/router',
        'mnp/search_form_v' : '../../target/scala-2.9.1/resource_managed/main/public/javascripts/rjs/src/mnp/search_form_v',
        'mnp/prop_c' : '../../target/scala-2.9.1/resource_managed/main/public/javascripts/rjs/src/mnp/prop_c',
        'mnp/prop_m' : '../../target/scala-2.9.1/resource_managed/main/public/javascripts/rjs/src/mnp/prop_m',
        'mnp/prop_list_v' : '../../target/scala-2.9.1/resource_managed/main/public/javascripts/rjs/src/mnp/prop_list_v',
        'mnp/prop_item_v' : '../../target/scala-2.9.1/resource_managed/main/public/javascripts/rjs/src/mnp/prop_item_v'
    },


    /*not compatible with modules*/
    name: 'vendor/almond',
    include: ["main"],

    out: "dist/app.js",
    /*not compatible with modules*/

    keepBuildDir: false,

    preserveLicenseComments: false,
    optimize: "none", 
    wrap: {
        start: "(function(global, define) {\n"+
           // check for amd loader on global namespace
            "  var globalDefine = global.define;\n",

        end:   "  var library = require('main');\n"+
            "  if(typeof module !== 'undefined' && module.exports) {\n"+
            // export library for node
            "    module.exports = library;\n"+
            "  } else if(globalDefine) {\n"+
            // define library for global amd loader that is already present
            "    (function (define) {\n"+
            "      define(function () { return library; });\n"+
            "    }(globalDefine));\n"+
            "  } else {\n"+
            // define library on global namespace for inline script loading
            "    global['main'] = library;\n"+
            "  }\n"+
            "}(this));\n"
    }


})`

score 2 · Answer 1 · edited May 23 '17 at 10:27

2

FWIW: If anyone runs into this issue...using the amd versions of backbone and underscore seemed to solve things. ie. the amd-versions worked and the shim didn't

Loading Backbone and Underscore using RequireJS

edited May 23 '17 at 10:27

Community

1
1

answered Sep 24 '12 at 19:28

user1691935

61
1
4

Kim Joar · Answer 2 · 2012-09-29T16:10:26.110

1

I had this problem when I forgot to include my shims. I solved it by setting the mainConfigFile to my main.js file in the build config, e.g. as shown here: https://github.com/jrburke/r.js/blob/master/build/example.build.js

edited Sep 29 '12 at 16:10

answered Sep 28 '12 at 22:08

Kim Joar

86
1
5

score 0 · Answer 3 · answered Sep 23 '12 at 07:15

0

you could try to use inlineText: true to make sure that backbone is in your compiled .js file

furthermore, to avoid having to keep an eye on 2 objects storing the paths, I would recommend something like mainConfigFile: "main.js" - works like a charm ;) EDIT: why do you set a mainConfigFile option and the paths?

answered Sep 23 '12 at 07:15

Peter

946
9
23

Thanks, tried adding inlineText: true with no luck...I have both the mainConfig and paths set in build.js because I am using the Scala Play framework which puts compiled coffeescript into a 'managed_resources' directory outside of the baseUrl. So, I use the mainConfig file to set the vendor paths (and shim) in only one place, but use the paths in build.js to override and set the actual physical locations of the play-compiled coffeescript (in managed_resources). But maybe this is the wrong approach?... – user1691935 Sep 23 '12 at 15:53
sry, I'm not familiar with coffeescript :/ but maybe you are loading backbone, but forgot to pass it as parameter (at least the error appears caused by something like this) – Peter Sep 24 '12 at 07:59

Require.js + TypeError: Backbone is undefined after optimization

3 Answers3