Problem with requireJS and latest build?

[jptaylor]

I upgraded Marionette to version 1.8.3 and am no longer able to build use r.js/grunt-requirejs. I've replicated by doing the following:

bower.json

"dependencies": {
    "jquery": "1.9",
    "backbone": "latest",
    "less": "latest",
    "underscore": "latest",
    "backbone.marionette": "latest",
    "requirejs": "latest",
    "requirejs-text": "latest",
    "handlebars.js": "latest",
    "modernizr": "latest",
    "almond": "latest",
  }

Gruntfile.js

    requirejs: {
      compile: {
        options: {
          base:'build',
          include: ['main'],
          mainConfigFile: 'build/src/app/main.js',
          out: 'build/app.min.js',
          optimize: 'none',
          almond:true,
          cjsTranslate: true,
          findNestedDependencies: true,
          preserveLicenseComments: true

        }
      }
    },

main.js (config file)

require.config({
    paths: {
        // Libraries
        modernizr: '../../vendor/modernizr/modernizr',
        jquery: '../../vendor/jquery/jquery',
        underscore: '../../vendor/underscore/underscore',
        backbone: '../../vendor/backbone/backbone',
        marionette: '../../vendor/backbone.marionette/lib/backbone.marionette',
        handlebars: '../../vendor/handlebars.js/dist/handlebars',
        text: '../../vendor/requirejs-text/text',

        // Directories
        templates: '../templates'
    },

    shim: {
        "underscore":{
            exports: "_"
        },
        "backbone": {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        },
        "marionette":{
            deps : ['jquery', 'underscore', 'backbone'],
            exports: "Marionette"
        },
        "handlebars": {
            exports: "Handlebars"
        }
    }
});

require([
    'backbone', 'marionette',
], function (Backbone, Marionette) {
    "use strict";
    console.log(Marionette);
});

Running the above returns with: Uncaught ReferenceError: Backbone is not defined

The problem goes away if I remove the Marionette import, and also if I downgrade to version 1.7.

[Anachron]

Seems like they changed the name from backbone to Backbone.
You can make fake entry called Backbone which requires backbone and your problem will disappear.

[samccone]

ping @jmeas @jasonLaster

[jamesplease]

Seems like they changed the name from backbone to Backbone.

Where is this change?

[Anachron]

Actually, it seems to be correct.

My idea is that your Backbone updated too?
Did you try to make a fake entry like I suggested above?

[jptaylor]

@Anachron I am using Backbone version "1.1.2". I'll try adding a fake entry now and see if it resolves the issue.

[jptaylor]

No joy, unfortunately.

Seems the same problem exists with the AMD version:

require.config({
    paths: {
        // Libraries
        modernizr: '../../bower_components/modernizr/modernizr',
        jquery: '../../bower_components/jquery/jquery',
        underscore: '../../bower_components/underscore/underscore',
        backbone: '../../bower_components/backbone/backbone',
        marionette: '../../bower_components/backbone.marionette/lib/core/amd/backbone.marionette',
        'backbone.wreqr' : '../../bower_components/backbone.wreqr/lib/backbone.wreqr',
        'backbone.eventbinder' : '../../bower_components/backbone.eventbinder/lib/backbone.eventbinder',
        'backbone.babysitter' : '../../bower_components/backbone.babysitter/lib/backbone.babysitter',
        moment: '../../bower_components/momentjs/moment',
        text: '../../bower_components/requirejs-text/text',

        // Directories
        templates: '../templates'
    },

    shim: {
        "underscore":{
            exports: "_"
        },
        "backbone": {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        },

        "handlebars": {
            exports: "Handlebars"
        }
    }
});

require([
    'backbone', 'marionette',
], function (Backbone, Marionette) {
    "use strict";
});

[Anachron]

Hey, I mean you should add Backbone to shim which requires backbone and exports Backbone.
This will kind of act like a proxy.

[jamesplease]

I can't see that anything has changed in the factory fn between the two versions, which is where I would think the problem would be.

1.7 factory

Current fn

[jptaylor]

@jmeas Weird. I just tried installing v1.7 and the same problem persists. It was working literally yesterday, so this leads me to believe perhaps there is something wrong with my grunt file or with almond. Are you able to replicate at all?

@Anachron You mean like this?

"backbone": {
     deps: ["underscore", "jquery"],
     exports: "Backbone"
},
"Backbone": {
     deps: ["backbone"],
     exports: "Backbone"
},

[Anachron]

@jptaylor yes like that, does it work?

[jptaylor]

@Anachron No unfortunately. I mean I'm not even sure what it is doing since it is still exporting to "Backbone".

[jamesplease]

@jptaylor sounds like it might be something about your project. Maybe look through the commit history and see if anything stands out?

[rhubarbselleven]

Using latest is a bit hairy. This could be a contributing factor: marionettejs/backbone.babysitter#44

[jptaylor]

@rhubarbselleven Interesting, because the source maps are pointing to babysitter as the culprit. Is there anything I can do to test this logic?

I created a completely barebones marionette + require project from scratch last night and the problem persists so @jmeas I'm starting to wonder if this is confined to my project.

[samccone]

https://www.npmjs.org/package/backbone.babysitter

hopefully resolved with 0.1.2

let me know @jptaylor

[rhubarbselleven]

This is due to Backbone's 1.1.1 release and their AMD implementation (http://backbonejs.org/#changelog).

My immediate workaround is to specify the version of bower to be used in bower.json

bower install --save backbone#1.1.0

Howto fix this forever. Well not sure yet. @davidsulc suggests using wrapShim:true as a part of your requirejs build config, but I have not had success with this option yet.

See https://github.com/jrburke/r.js/blob/b8a6982d2923ae8389355edaa50d2b7f8065a01a/build/example.build.js#L68

I'm tempted to request limiting Marionette's upper backbone limit to v1.1.0 until there's some more clarity around this.

[samccone]

ah thanks for the awesome research @rhubarbselleven

ping @jmeas @jasonLaster @thejameskyle

[jptaylor]

Yup - a combination of things but that does seem to be the root of the problem. At least I know what I'm up against now. Thanks all.

[rhubarbselleven]

requirejs/r.js#623

[jamesplease]

so...Backbone doesn't work with require js right now because their UMD is mezzed up?

[rhubarbselleven]

It must work, the release has been out in the wild for 3 months. There must be something else here.

[ahumphreys87]

@rhubarbselleven @jmeas @samccone Im using backbone 1.1.2 and the wrapShim config property fixed this issue for me.

[rhubarbselleven]

Which requirejs version are you using @ahumphreys87 ? And are you using almond?

[ahumphreys87]

@rhubarbselleven Im on 2.1.11. Yeah I use almond - is this not working for you?

[spchuang]

Was this ever solved? I'm getting the same issue after I updated to backbone 1.1.2

[jamesplease]

@spchuang, what version of Marionette are you using? And are you using RequireJS? Are you using wrapShim?

[spchuang]

@jmeas, wrapShim:true actually fixed the problem