Backbone is not defined while loading Marionnette after r.js build/optimization

[lbdremy]

Hello @jrburke,

I'm using Backbone from the master branch because I want some of the fixes and I noticed that now Backbone supports AMD.

Everything is working fine while using require.js to load the dependencies but when I optimize and get out of it a single file with r.js (I'm using grunt-contrib-requirejs which uses requirejs 2.1.0), I get the following error "Uncaught ReferenceError: Backbone is not defined backbone.marionette.js:37
(anonymous function)".

The configuration given to requirejs for the build is the following:

  requirejs.config({
    shim: {
      'zepto': {
        exports: 'Zepto'
      },
      'zepto-touch': {
        exports: 'Zepto',
        deps: ['zepto']
      },
      'iscroll': {
        exports: 'IScroll'
      },
      'marionette' : {
        deps : ['zepto', 'underscore', 'backbone', 'deferred-installed'],
        exports : 'Marionette'
      },
      'underscore': {
        exports: '_'
      },
      'deferred': {
        deps: ['zepto'],
        exports: 'Deferred'
      }
    },
    paths: {
      requireLib : '../bower_components/requirejs/require',
      i18nprecompile: '../bower_components/require-handlebars-plugin/hbs/i18nprecompile',
      json2 :'../bower_components/require-handlebars-plugin/hbs/json2',
      hbs : '../bower_components/require-handlebars-plugin/hbs',
      handlebars : '../bower_components/require-handlebars-plugin/Handlebars',
      async: '../bower_components/requirejs-plugins/src/async',
      zepto: '../bower_components/zepto/zepto',
      iscroll: '../bower_components/iscroll/build/iscroll',
      underscore: '../bower_components/underscore/underscore',
      backbone: '../bower_components/backbone/backbone',
      marionette: '../bower_components/marionette/lib/backbone.marionette',
      deferred: '../bower_components/simply-deferred/deferred',
      path : 'vendors/path'
    },
    hbs: {
      disableI18n: true,
      disableHelpers: true
    },
    map : {
      'backbone': {
        'jquery': 'zepto'
      }
    },
    include : [
      'requireLib'
    ]
  });

For the grunt task for requirejs I configured like that:

requirejs : {
      dev : {
        options : {
          baseUrl : '<%= yeoman.app %>/scripts/',
          mainConfigFile : '<%= yeoman.app %>/scripts/main.js',
          out : '<%= yeoman.dist %>/scripts/main.js',
          name : 'main',
          findNestedDependencies: true,
          generateSourceMaps : true,
          optimize: 'uglify2',
          done: checkRjsBuild
        }
      }
    }

Anything that I'm missing? Thank you very much

[jrburke]

Do you have the built file, or a test of the built file that shows the error? I do not know marionette code, and it is likely quicker to debug by having the failure test case to run.

[lbdremy]

Thanks for the super quick response.

I have put together a sample here that reproduce the error http://jsfiddle.net/wuf6U/ and I have put there the two files the build and the source map file https://gist.github.com/lbdremy/7fe22113c9c9e318cef1 (the preview of the files do not seem to work but the raw links show the content of the files).

You should get something like that in the Chrome console:

backbone context:  
Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}
 main.js:2
define:  function (t,e,n){var i,r;"string"!=typeof t&&(n=e,e=t,t=null),isArray(e)||(n=e,e=null),!e&&isFunction(n)&&(e=[],n.length&&(n.toString().replace(commentRegExp,"").replace(cjsRequireRegExp,function(t,n){e.push(n)}),e=(1===n.length?["require"]:["require","exports","module"]).concat(e))),useInteractive&&(i=currentlyAddingScript||getInteractiveScript(),i&&(t||(t=i.getAttribute("data-requiremodule")),r=contexts[i.getAttribute("data-requirecontext")])),(r?r.defQueue:globalDefQueue).push([t,e,n])} main.js:2
define.amd Object {jQuery: true} main.js:2
amd ready! main.js:2
In backbone.marionnette file context:  
Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}
 main.js:3
Uncaught ReferenceError: Backbone is not defined main.js:3

[loweryjk]

I'm seeing a similar issue. Our build broke as soon as requirejs@2.1.10 was released. The optimized version of our build no longer contains several scripts. Forcing grunt-contrib-requirejs to use requirejs@2.1.9 fixes the issue. Obviously the latest release of requirejs needs fixing. At this time I'm not sure of exactly how requirejs is failing.

[leachryanb]

I've been waiting for the time to submit a use-case, but I also had to specify a hard dependency on 2.1.9 after the .10 release. It broke our package config. Our defined packages no longer resolved as packages. While referencing build output, the package ids were 404ing. I reset removeCombined back to false and then noticed that the package main.js files were the only files dynamically loading. Will try to find time to work up the sample use-case. Thanks.

[jrburke]

@lbdremy: so this one is interesting. Marionette is a shimmed script, but backbone is an AMD-defined one. AMD modules are not defined until they are required, but Marionette executes inline. So I think this is a pathway to fixing:

1. For now, if you use the AMD version of marionette that should work better.

2. I will look at a build option that wraps the shimmed script completely in a define() so that this sort of thing can be avoided. Not all shimmed scripts could work with this approach, and I'm not sure this will be the best long term option, but I will look more into it, as there may be other backbone users using dependencies that use Backbone but want it defined immediately.

@loweryjk and @leachryanb: test cases are much appreciated. I suggest opening separate tickets from this one as they may have different solutions. Also note though that a require.js 2.1.10 should be paired with the use of a r.js 2.1.10. If there is a mismatch then there could be problems, so I would confirm that first.

[lbdremy]

Thanks @jrburke using the AMD version of marionette fixed the issue.

[samelie]

I just had this problem and for me it was down to the version on Backbone I was using. Reverting back to version 1.0.0 fixed the issue.

[jrburke]

@samelie hard to know what might be the root of the issue based on that description, but r.js 2.1.11 has support for a wrapShim: true option if the issue showed up after doing an optimization build.