CODEWITHSUNDEEP
javascriptscalabackbone.jsplayframeworkrequirejs
user1691935
user1691935

Reputation: 61

Require.js + TypeError: Backbone is undefined after optimization

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"
    }


})`

Upvotes: 4

Views: 4311

Answers (3)

Kim Joar
Kim Joar

Reputation: 86

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

Upvotes: 1

user1691935
user1691935

Reputation: 61

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

Upvotes: 2

Peter
Peter

Reputation: 956

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?

Upvotes: 0

Related Questions