How load Emberjs 2.0 with jspm and systemjs

I am try use Ember 2.0 and have next files config.js

System.config({
  "baseURL": "/static/js",
  "transpiler": "traceur",
  "paths": {
    "*": "*.js",
    "github:*": "jspm_packages/github/*.js"
  }
});

System.config({
  "map": {
    "ember": "github:components/[email protected]",
    "traceur": "github:jmcriffey/[email protected]",
    "traceur-runtime": "github:jmcriffey/[email protected]",
    "github:components/[email protected]": {
      "jquery": "github:components/[email protected]",
      "handlebars": "github:components/[email protected]"
    }
  }
});

app.js

import Ember from "ember";
let App = Ember.Application.create({
    LOG_TRANSITIONS: true,
    LOG_TRANSITIONS_INTERNAL: true,
});

and index.html

<script src="{% static "js/jspm_packages/system.js" %}"></script>
<script src="{% static "js/config.js" %}"></script>
<script>
    System.import('app');
</script>

aftre load i have next error

Uncaught (in promise) Error: Cannot read property 'Ember' of undefined
    Error loading http://localhost:9090/static/js/app.js
    at http://localhost:9090/static/js/jspm_packages/github/components/[email protected]/ember.js!transpiled:16:38
    at http://localhost:9090/static/js/jspm_packages/github/components/[email protected]/ember.js!transpiled:97:11
    at execute (http://localhost:9090/static/js/jspm_packages/github/components/[email protected]/ember.js!transpiled:25603:9)
    at m (http://localhost:9090/static/js/jspm_packages/system.js:4:20821)
    at m (http://localhost:9090/static/js/jspm_packages/system.js:4:20756)
    at m (http://localhost:9090/static/js/jspm_packages/system.js:4:20756)
    at Object.Promise.all.then.execute (http://localhost:9090/static/js/jspm_packages/system.js:4:23421)
    at b (http://localhost:9090/static/js/jspm_packages/system.js:4:7874)
    at S (http://localhost:9090/static/js/jspm_packages/system.js:4:8253)
    at p (http://localhost:9090/static/js/jspm_packages/system.js:4:6131)

if load scripts without systemjs and jspm always work. but want use jspm and systemjs :) Before i use ember 1.13 and with config worked. I think problem with config jquery

Solution

It looks like the package for Ember is not always jspm-compatible. I always use the following override in my package.json:

"jspm": {
  "overrides": {
      "github:components/[email protected]": {
      "main": "ember.debug",
      "files": [
        "ember.prod.js",
        "ember.debug.js"
      ],
      "dependencies": {
        "jquery": "github:components/jquery@^2.1.3"
      },
      "shim": {
        "ember.prod": {
          "deps": [
            "jquery"
          ],
          "exports": "Ember"
        },
        "ember.debug": {
          "deps": [
            "jquery"
          ],
          "exports": "Ember"
        }
      }
    }
  }
}

It dictates jspm to install only prod and debug versions of Ember and describes all dependencies and exports properly. If you use it, you need to run jspm install again after you added it to your package.json.

You may encounter another problem with htmlbars templates. I have got a plugin to solve that: https://github.com/n-fuse/plugin-ember-hbs:

jspm install hbs=github:n-fuse/[email protected]

should allow importing hbs templates w/o the need to add a compiler in dependencies.

See also a starter project I created: https://github.com/OrKoN/jspm-ember-playground