Can't find DS.Store instantiation in Ember application

Question

I have successfully build a small UI widget in Ember.JS using JSFiddle. Works fine with the Ember-data Fixture Adaptor but I wanted to take it into a local environment and thought I'd use Brunch to build the environment for me. Since that time I've wasted a full day trying to get it work and I'm hoping that someone can help me get over this hump. My strong suspicion at this time is that the remaining problem is either a namespace or sequencing issues that arises out of the common-js packaging that Brunch does for you. I'm quite new to common-js so it may be that this is just a simple lack of understanding ... here's the basic problem:

• When I run the application and move to the activities template I get a Assertion failed: Your application does not have a 'Store' property defined error.

My initialisation file looks like this:

// Namespace
App = require('app');
// ===== Router =====
App.Router.map(function() {
    this.resource('index', { path: '/' }, function() {});
    this.resource('activities', { path: '/activities' }, function() {});
    this.resource('hi', { path: '/hi' }, function() {});

});
// ===== Routes =====
require('routes/ActivitiesRoute');

// ===== Store =====
require('stores/Fixture');

// ===== Models =====
require('models/Activity');

// ===== Views =====

// ===== Controllers ===== 
require ('controllers/ActivitiesController');

// ===== Template Helpers =====
require('helpers/time');

// ===== Templates =====
require ('templates/application');
require ('templates/hi');
require ('templates/activities');

A working example of the code -- albeit without common-js and brunch -- can be found in this JSBin: http://jsbin.com/oyosev/56/edit. When running it locally, it loads up the index page and can navigate back and forth between the "hi" page and the index without incident. The problem happens when you {{#linkTo}} the Activities view/template/controller. The Activities -- of course -- is the only view/controller that is backed by a model. As I understand it, the flow starts with my ActivitiesRoute:

App=require("app");

console.log("ActivitiesRoute file loaded");
module.exports = App.ActivitiesRoute = Ember.Route.extend({

    init: function() {
        console.log("ActivitesRoute instantiated!");
    },

    model: function() {
        return App.Activity.find();
    }

});

It successfully instantiates the object (as will be seen in the following log file) but then tries to load the Activity model and this is where it notices ... hey, you haven't defined the Store yet. The problem is ... we have or at least we have attempted to. For reference purposes here are the console messages that help to tell the execution story:

The first important thing to notice is that the initialisation script we have included the line: require('stores/Fixtures'); which should lead to an instantiation of DS.Store that is stored in the App.Store property. Here's the Fixtures.js file:

App = require("app");

console.log("Store file loaded");
module.exports = App.Store = DS.Store.extend({
    init:function() { console.log("Store instantiated!"); },
    revision: 13,
    adapter: DS.FixtureAdapter.create()
});

You can see in the console log (above) that the file is indeed loaded but the init method should be run on instantiation and it never does so it appears there is something wrong here but I'm at a loss to explain what as its the same exact syntax (with the exception of the common-js modules.export and require statements) is working in the Fiddle.

Any and all help would be greatly appreciated.

-=-=-=-=- UPDATE -=-=-=-=-

I've added another debugging line in the init function of the ActivitiesRoute that sends the App object to the console for inspection. I'm not an expert on what it's supposed to look like but this feels like a strong clue as the local installation claims the Store is a (unknown mixin) but when run in JSBin the Store reports to be a App.Store:

Answer 1

Ok, after much pain I have now solved the problem. It was largely down to:

• Duplicate files in /vendor/scripts

More details on how this came to pass and transient problem that I ran into in the process below:

Duplicate Files

• I noticed -- when looking at the /vendor/scripts directory -- that there were two Ember scripts (ember-latest and ember-1.0.rc.6). Ironically the one called rc.6 was actually an rc.5 build whereas the ember-latest was indeed rc.6. In either case, having two was clearly asking for trouble.
• Because the "ember-latest" file was more current I went with that and removed the "rc.6" file.
• This then led to a transient error:
  • I now only had one ember file in the vendor.js but Ember was being compiled AFTER ember-data
  • This called all sorts of dependency problems which aren't managed by common-js (as they are in app.js file)
  • The config.coffee file does manage sequencing but that's when I noticed that it was referring to "rc.6" file not the "latest" file so effectively it was giving no instruction to the required sequencing between Ember and Ember-Data. Grrr.
  • Easily fixed though, I changed the config.coffee reference and it worked.
• Now that's great but HOW did I end up with two files in the first place?
  • Well the Brunch skeleton I forked (brunch-with-ember-reloaded) has a Cakefile that provides a convenient way to pull down the latest ember and emberdata files: cake getember and cake getemberdata.
  • Emberdata is fine, it creates a file called ember-data-latest.js which is the only naming convention for Ember-Data in that directory.
  • getember, however, creates a file called ember-latest.js but the original file was the aforementioned ember-1.0.rc.6 file.
  • so, in effect, the automation in the Cakefile led to the duplicate file and the newly downloaded Ember code was not the target of the Brunch solution but instead the static "rc.6" file.

Epilogue

I must say I'm glad to have that problem out of the way. If you're still reading along you may be interested to know that I have made all the needed changes to my forked Brunch skeleton. Please note that my repo has been modified to allow for JavaScript coding instead of CoffeeScript and I've also switched to using the LESS processor instead of Stylus.

Skeleton: brunch-with-ember-sideloaded

Answer 2

I looked at the repo. Tinkering in the console, gave me some interesting results.

I added the following log after your 'store loaded' log.

console.log("Store file loaded");
console.log('App.Store === App.Action', App.Store === App.Action);
module.exports = App.Store = DS.Store.extend({
  revision: 13,
  adapter: DS.FixtureAdapter.create()
});

It returns true!! For some reason that is beyond me, your App.Store reference is equal to the model App.Action!!! It has the FIXTURES property and all!!

I'm a little bemused by this, aren't module loaders supposed mitigate exactly this? I don't see any other explicit Store assignment. My recommendation would be explore what the Brunch require loader does, or ping the author he might be able to help.