Marionette

[guybedford]

Example at https://github.com/ahankinson/jspm-test.

Backbone.$ needs to be set before Marionette is loaded.

The thing is this line in Backbone should be doing that already - https://github.com/jashkenas/backbone/blob/master/backbone.js#L46.

So for some reason Backbone itself is not getting a defined value for jQuery.

This is because Backbone doesn't itself have a hard dependency on jQuery.

The fix would be then to just add a jQuery shim for Backbone.

[Jarreddebeer]

Do we want to force the dependency on jQuery then?

It seems there was a previous decision not to do this: "It was set up this way though because we want jQuery to be an optional dependency and not enforced." from here https://groups.google.com/forum/#!topic/systemjs/VNw_7FJnP6M

[ahankinson]

I'm not quite sure how to shim jQuery in Backbone. I've tried following the instructions here:

https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm#shim

Added to my config.js, inside System.config.

"shim": {
      "npm:backbone@1.1.2": {
          "deps": ["jquery"],
          "exports": "$"
      }
  }

But that doesn't help.

[ssalat]

Lost the whole day on it... is there any quick and dirty fix to get this problem temporarily out of my way? The shim config didn't work either.

[guybedford]

@Jarreddebeer yes.

Yes - the first step here is getting the override for Backbone to work. That means trying overrides like for example:

jspm install backbone -o "{shim:{backbone:{deps:['jquery']}}}"

[ssalat]

@guybedford can you explain me where the shim setting executed with "-o" is going on a file level? I don't find them in the SystemJS config.js or package.json file after executing it.

[guybedford]

The shim is written into the top of the file itself with meta syntax.

[ssalat]

Which file? The config.js?

[guybedford]

The js file being shimmed. backbone.js in this case.

[ahankinson]

Installing backbone with that shim works, but now there seems to be a problem with an underscore dependency in backbone itself. I've pushed the config file change, but now the error is:

backbone.js:222 Uncaught TypeError: Cannot read property 'each' of undefined
system.src.js:2230 Uncaught Error evaluating http://localhost:8001/jspm_packages/npm/backbone@1.1.2/backbone.js
Uncaught TypeError: Cannot read property 'each' of undefined
es6-module-loader.src.js:140 Potentially unhandled rejection [2] Error loading "npm:backbone@1.1.2" at http://localhost:8001/jspm_packages/npm/backbone@1.1.2.js
Error loading "npm:backbone@1.1.2" from "main" at http://localhost:8001/main.js
Error evaluating http://localhost:8001/jspm_packages/npm/backbone@1.1.2.js
Uncaught Error evaluating http://localhost:8001/jspm_packages/npm/backbone@1.1.2/backbone.js
Uncaught TypeError: Cannot read property 'each' of undefined (WARNING: non-Error used)

The line that errors is backbone.js:222, which is

_.each(listenMethods, function(implementation, method) {

[ahankinson]

Ok, so I seem to have it working now. In jspm_packages/npm/backbone@1.1.2/backbone.js at the top of the file (lines 9-12):

} else if (typeof exports !== 'undefined') {
      var _ = require("underscore");
      var $ = require("jquery");
      factory(root, exports, _, $);

The changes were to add var $ = require("jquery"); and add "$" to the factory() call.

Obviously this isn't a permanent solution since reinstalling will wipe out these changes, but it may help figure out what needs to be done to solve this problem.

[guybedford]

To get the shim to work properly, I think we just need to add underscore as well as jQuery in the override -

jspm install backbone -o "{shim:{backbone:{deps:['jquery', 'underscore']}}}"

[ahankinson]

This doesn't seem to work either. I've updated the test case here:

https://github.com/ahankinson/jspm-test

Installing backbone with this on the command line and/or adding it to config.js doesn't work.

[guybedford]

Can you describe what the issue is? Is it running the global module definition code path? Are underscore and jQuery being defined? I'll look into this myself tomorrow if I have time.

[ahankinson]

As far as I can tell, the issue is that the $ symbol is not being picked up by Backbone when it loads, since it is not defined. This is fine for Backbone, since it doesn't require jQuery, but I think Marionette does. Both underscore and jquery are installed but Marionette does not seem to be able to find them.

In the comment above I detailed what I did to get it to work, but obviously it's not a permanent solution.

[Jarreddebeer]

@ssalat, the following should work as a quick fix, i'll see if I can update the registry override for Backbone today so it won't be necessary:

in index.html:

System.import('backbone').then(function(Backbone) { Backbone.$ = System.import('jquery'); System.import('main'); });

Where main is your entry point

[ahankinson]

@Jarreddebeer I just tested your solution and it still doesn't work, but it's a different error. It does not fail on import now, but when accessing Marionette.Deferred (alias to Backbone.$.Deferred) it fails because $.Deferred is undefined.

I have updated the test case at https://github.com/ahankinson/jspm-test

[NervosaX]

@ahankinson @Jarreddebeer 's fix worked for me.

In index.html I have:

System.import("bootup");

In bootup.js I have:

import Backbone from "backbone";
import $ from "jquery";

Backbone.$ = $;

System.import("index");

export default {};

and then I can import Marionette in the index.js

[abiee]

I create a project which uses Marionette and jspm. Take a look about how I solve this for development and distribution.

https://github.com/abiee/es6-marionette

[e1024kb]

Hi guys. I guess, I solved the issue in more elegant way without Backbone.$ = require('jquery'):

in package.json or jspm install: "jashkenas/backbone": "github:jashkenas/backbone@1.1.2" in config.js I added the link to the jashkenas/backbone like below:

"backbone": "github:jashkenas/backbone@1.1.2", // manually added by me
"jashkenas/backbone": "github:jashkenas/backbone@1.1.2", // automatically added by jspm

Here I using the "browser" version of Backbone and it works fine. Hope it may helps someone.

My full package.json:

{
  "jspm": {
    "directories": {},
    "configFile": "config.js",
    "dependencies": {
      "backbone.babysitter": "github:marionettejs/backbone.babysitter@0.1.6",
      "backbone.wreqr": "github:marionettejs/backbone.wreqr@1.3.2",
      "jashkenas/backbone": "github:jashkenas/backbone@1.1.2",
      "jquery": "github:components/jquery@2.1.3",
      "marionette": "github:marionettejs/backbone.marionette@2.4.1",
      "underscore": "npm:underscore@1.8.2",
    },
    "devDependencies": {
      "babel": "npm:babel-core@^5.0.12",
      "babel-runtime": "npm:babel-runtime@^5.0.12",
      "core-js": "npm:core-js@^0.8.1"
    }
  }
}

config.js looks like below:

System.config({
  "baseURL": "./",
  "transpiler": "babel",
  "babelOptions": {
    "optional": [
      "runtime"
    ]
  },
  "paths": {
    "*": "*.js",
    "github:*": "jspm_packages/github/*.js",
    "npm:*": "jspm_packages/npm/*.js"
  }
});

System.config({
  "map": {
    "babel": "npm:babel-core@5.1.11",
    "babel-runtime": "npm:babel-runtime@5.1.11",
    "backbone": "github:jashkenas/backbone@1.1.2",
    "backbone.babysitter": "github:marionettejs/backbone.babysitter@0.1.6",
    "backbone.wreqr": "github:marionettejs/backbone.wreqr@1.3.2",
    "bootstrap": "shared/bootstrap",
    "core-js": "npm:core-js@0.8.4",
    "handlebars": "shared/handlebars",
    "jashkenas/backbone": "github:jashkenas/backbone@1.1.2",
    "jquery": "github:components/jquery@2.1.3",
    "marionette": "npm:backbone.marionette@2.4.1",
    "underscore": "npm:underscore@1.8.2",
    "github:jspm/nodelibs-process@0.1.1": {
      "process": "npm:process@0.10.1"
    },
    "npm:backbone.babysitter@0.1.6": {
      "backbone": "github:jashkenas/backbone@1.1.2",
      "process": "github:jspm/nodelibs-process@0.1.1",
      "underscore": "npm:underscore@1.8.2"
    },
    "npm:backbone.marionette@2.4.1": {
      "backbone": "github:jashkenas/backbone@1.1.2",
      "backbone.babysitter": "npm:backbone.babysitter@0.1.6",
      "backbone.wreqr": "npm:backbone.wreqr@1.3.1",
      "process": "github:jspm/nodelibs-process@0.1.1",
      "underscore": "npm:underscore@1.8.2"
    },
    "npm:backbone.wreqr@1.3.1": {
      "backbone": "github:jashkenas/backbone@1.1.2",
      "process": "github:jspm/nodelibs-process@0.1.1",
      "underscore": "npm:underscore@1.8.2"
    },
    "npm:core-js@0.8.4": {
      "process": "github:jspm/nodelibs-process@0.1.1"
    }
  }
});

[danvoyce]

Looks like I came along at just the right time. The above worked for me... There's a trailing comma though breaking the install...

"underscore": "npm:underscore@1.8.2",

Cheers!

[davis]

hm... i still am not sure on how to use marionette using jspm :(

i tried everyone's solutions and i still get the following:

[NervosaX]

@davis

You can override the backbone version now.

jspm resolve --only npm:backbone@1.2.0

[davis]

i ended up using jspm install marionette instead of backbone.marionette and that seemed to do it ._.

[davis]

marionette is undefined :(

[ahwitz]

If anyone runs into this issue again, it seems to be solved in Backbone 1.2.1.

[ahankinson]

I tried it with the latest version of Backbone too, and it seems to be resolved now. This issue can be closed.

[magoni]

This may be related for some: Backbone 1.2.1 currently breaks certain functionality with Marionette because Marionette has not updated its dependency yet. https://github.com/marionettejs/backbone.marionette/issues/2559

[davis]

with latest jspm (beta) marionette works perfectly i can use things like

import {CollectionView} from 'marionette';

and it works. it's wonderful

[ahankinson]

It works, but some things are a bit wonky. We've had a problem with @ui click events not working with Backbone 1.2.1, but working fine with 1.1.2. So just because it imports doesn't necessarily mean that everything works.

[zeeshanjan82]

I am facing the following issue which I think is related. https://github.com/jspm/demo-es6/issues/15

[zeeshanjan82]

Have fixed the issue , had to import jquery.

[MeoMix]

Just to re-iterate for anyone who needs or wants to stay on Backbone 1.1.2:

I ran the following command:

jspm install backbone@1.1.2 -o "{ map: { underscore: 'lodash' }, shim: { backbone: { deps: ['jquery'] } } }

and it worked well for me. Backbone.$ is defined no problem as well as converting my dependency from underscore to lodash.