Ember CLI project crashes when I change CSS file. Am I missing something?

Question

I'm pretty new to Ember but have used Ember CLI to create a project and am on my way. Lots to learn but I'm very impressed so far.

Anyway, my understanding is that Ember CLI projects use broccoli's file-watching features to create a "continuous development" environment. I've seen it in action: as I change templates or javascript files, my changes are immediately apparent when I switch back to the browser.

But when I make changes to css files, my app crashes. Console output is below. Note that when I restart the app with ember server, everything works as exepected. So this isn't some CSS syntax error or the like.

So ... this sure seems like a bug to me, but I'm so new around here that I'm wondering if I'm just missing something very basic.

We're not talking SASS files, either. I'm getting this error if I change a single character in a very small /app/styles/app.css - the one generated by ember new. I've also tried moving the style rule to a file called my.css and leaving app.css empty except for this one line: @import 'my.css'; No love.

Can anyone help? Thanks in advance,

-Billy B

D:\BitBucket\dispatch-alert\node_modules\ember-cli\node_modules\broccoli-sane-watcher\node_modules\sane\index.js:246
Object.keys(this.dirRegistery[dir]).forEach(function(file, i, arr) {
     ^
TypeError: Object.keys called on non-object
at Function.keys (native)
at Watcher.detectChangedFile (D:\BitBucket\dispatch-alert\node_modules\ember
-cli\node_modules\broccoli-sane-watcher\node_modules\sane\index.js:246:10)
at Watcher.normalizeChange (D:\BitBucket\dispatch-alert\node_modules\ember-c
li\node_modules\broccoli-sane-watcher\node_modules\sane\index.js:280:10)
at FSWatcher.EventEmitter.emit (events.js:98:17)
at FSEvent.FSWatcher._handle.onchange (fs.js:1039:12)

Update:

Based on the help I've gotten so far (thank you guys) and poking around a bit, I have a theory: because I can edit files in other directories and other editors just fine, I conclude that app/styles is just plain not in the list of "watched" directories. This could be a simple error of omission, but I"m wondering if it isn't deliberate. Wouldn't this directory be one that is processed by Compass and other CSS preprocessors, which might have their own file watching systems or otherwise have problems with watched files? Perhaps the makers of ember-cli have deliberately omitted this directory?

How do I find this out? And what should I do? Head over to the ember-cli project and ask for assistance there? I tried to find where a list of watched directories might be kept, but have so far been unsuccessful.

are you using sublime (3)? I've been able to track this error down to sublime. When I change the app.css/.less file in another editor it works.. — AyKarsi
@AyKarsi, I am indeed using Sublime 3. WebStorm produces the same results, but interestingly when I edit using NotePad (I'm on Windows), everything works as expected — BillyB
The problem is actually that app/styles being watched twice: once via ./app and again via ./app/styles. I've created an issue in ember-cli with more info: github.com/stefanpenner/ember-cli/issues/1166 — AyKarsi

AyKarsi AyKarsi · Accepted Answer · 2014-06-25T15:26:18

A workaround for the moment is to alter the index.js in line 246 (according in your error and my error messages) in the sane module and add something like this:

if (!this.dirRegistery[dir]){
    console.log('error',' empty/unkown dir',dir);
    callback();
    return;
}

No idea if this is is valid fix. Somehow this is related to sublime. (Caching, File-lock?)..

Ember CLI project crashes when I change CSS file. Am I missing something?

1 Answers