Can't find variable: DS in Ember CLI

Question

TL;DR - Ember Data is not working in basic Ember CLI app that is running v1.9.0 of Ember.js

I'm sorta/not-really new to Ember and Ember CLI and I just created a new project to try out version 1.9.0 of Ember.js here's a link: http://emberjs.com/blog/2014/12/08/ember-1-9-0-released.html

I'm at a point in my app (not very deep, I'll admit) where I was setting up FIXTURES to test some data but then this happened:

Console

Error while processing route: dashboard.index Cannot read property 'find' of undefined TypeError: Cannot read property 'find' of undefined
    at __exports__.default.Ember.Route.extend.model (focus-haven/routes/dashboard.js:9:24)
    at EmberObject.extend.deserialize (http://0.0.0.0:4200/assets/vendor.js:38356:21)
    at applyHook (http://0.0.0.0:4200/assets/vendor.js:61082:30)
    at Object.HandlerInfo.runSharedModelHook (http://0.0.0.0:4200/assets/vendor.js:59103:22)
    at Object.subclass.getModel (http://0.0.0.0:4200/assets/vendor.js:59329:21)
    at http://0.0.0.0:4200/assets/vendor.js:60956:19
    at tryCatch (http://0.0.0.0:4200/assets/vendor.js:61405:16)
    at invokeCallback (http://0.0.0.0:4200/assets/vendor.js:61417:17)
    at publish (http://0.0.0.0:4200/assets/vendor.js:61388:11)
    at http://0.0.0.0:4200/assets/vendor.js:42960:9

After doing a little investigating and running ember test, I got this:

not ok 14 PhantomJS 1.9 - ApplicationAdapter: it exists
    ---
        actual: >
            null
        message: >
            Setup failed on it exists: Can't find variable: DS
        Log: >
    ...
not ok 15 PhantomJS 1.9 - Dashboard: it exists
    ---
        actual: >
            null
        message: >
            Setup failed on it exists: Can't find variable: DS
        Log: >
    ...
not ok 16 PhantomJS 1.9 - Task: it exists
    ---
        actual: >
            null
        message: >
            Setup failed on it exists: Can't find variable: DS
        Log: >
    ...

... and I found this in my console:

DEBUG: -------------------------------
DEBUG: Ember      : 1.9.0
DEBUG: Handlebars : 2.0.0
DEBUG: jQuery     : 1.11.1
DEBUG: -------------------------------

I may be wrong, but I figured that Ember Data was not being loaded or imported or whatever, so I spent most of my day trying to fix this, but no dice.

Things I have tried:

• following this guide: http://www.cubicleapps.com/articles/todo-mvc-with-ember-cli-part-2
• reading both the ember cli and ember.js api docs/guide
• reinstalling ember-data via bower: bower install ember-data
• trying to implement solutions to similar questions found here at StackOverflow, but to no avail
• deleting the project and running ember new project (I did this 3x)
  • note: on the last project, the console was giving me different errors, but I solved those. App started running as intended but after I quit and re-ran ember serve a second time, the console error stated at the beginning of this question resurfaced, and now I'm back to square one. Poop.

The solution might be obvious, but I could not even come close to finding a solution after extensively running more tests and searching the web. So yeah, I'm a little tired and was hoping a fresh set of eyes might spot the smoking gun.

Relevant files include:

adapters/application.js

import DS from 'ember-data';

export default DS.FixtureAdapter.extend({});

models/task.js

import DS from 'ember-data';

var Task = DS.Model.extend({
  group: DS.attr('string'),
  kind: DS.attr('string'),
  body: DS.attr('string'),
  isCompleted: DS.attr('boolean')
});

Task.reopenClass({
    FIXTURES: [
        {
            id: 1,
            group: 'test',
            kind: 'project',
            body: 'whatever',
            isCompleted: false
        },
        {
            id: 2,
            group: 'test',
            kind: 'homwork',
            body: 'lol what nope',
            isCompleted: false
        }
    ]
});

export default DS.Store.extend({
    adapter: 'DS.FixtureAdapter'
});
export default Task;

routes/dashboard.js

import Ember from 'ember';

export default Ember.Route.extend({
    model: function() {
        return this.store.find('task');
    }
});

dashboard.hbs

{{#each task in model}}
    <p>{{task.group}}</p>
    <p>{{task.kind}}</p>
    <p>{{task.body}}</p>
    <p>{{task.isCompleted}}</p>
{{/each}}

bower.json

{
  "name": "focus-haven",
  "dependencies": {
    "handlebars": "2.0.0",
    "jquery": "^1.11.1",
    "ember": "1.9.0",
    "ember-data": "~1.0.0-beta.12",
    "ember-resolver": "~0.1.10",
    "loader.js": "stefanpenner/loader.js#1.0.1",
    "ember-cli-shims": "stefanpenner/ember-cli-shims#0.0.3",
    "ember-cli-test-loader": "rwjblue/ember-cli-test-loader#0.0.4",
    "ember-load-initializers": "stefanpenner/ember-load-initializers#0.0.2",
    "ember-qunit": "0.1.8",
    "ember-qunit-notifications": "0.0.4",
    "qunit": "~1.15.0"
  },
  "resolutions": {
    "handlebars": "2.0.0",
    "ember": ">=1.4 <2",
    "ember-data": "~1.0.0-beta.7"
  }
}

Answer 1

I was actually able to pinpoint the reason to my problem, but first let me address how I got Ember v1.9.0 running with Ember CLI.

Installing Latest Version of Ember JS in Ember CLI Project

This is how I updated my project running Ember CLI v0.1.4 to use Ember.js v1.9.0 (I would like some sort of confirmation to ensure that this is a valid method of updating Ember CLI apps, as not to potentially mislead others that are reading this question)

npm uninstall --save-dev broccoli-ember-hbs-template-compiler
npm install --save-dev ember-cli-htmlbars
rm -rf bower_components
bower install --save handlebars#2.0.0
bower install --save ember

Partial Solution to this Specific Question

In my case, the actual culprit of my issues was an Ember Addon called ember-cli-bootstrap-sass. Whenever I installed it, the issue would arise, and when I npn uninstall-ed it and removed it from my package.json's "devDependencies", this issue disappeared.

I don't know the actual specifics of why this was the case, but I believe that it may have something to do with the releationship between this addon's dependency with Handlebars v1.x (?) and Ember's dependency on the new HTMLbars compiler / Handlebars v2.0.0 (?). I could be totally wrong here.

Reference(s):

• https://github.com/ember-addons/bootstrap-for-ember/issues/193

But for now I won't be using this addon and I will investigate whether or not other Ember Addons duplicate the same issues.

PS: I have not tested or investigated if this issue arises with Ember.js v1.8.1

I'm still a novice web dev, so any input or points related to this sort of problem would be awesome! :D