Ember.js: Cannot read property 'isHelperInstance' of undefined

Question

I'm deploying my app to my staging environment for the first time, but I'm running into an error...One of my routes is unable to render its template. I'm seeing this error in the console:

Uncaught TypeError: Cannot read property 'isHelperInstance' of undefined

I was not seeing this error in development.

I'm using ember-cli-rails to serve the app using Heroku.

How can I solve this issue?

Answer 1

The cause of this error was due to referencing a component in a template that did not exist. The reason that I did not see the error in development is because I did not have the same data in my development environment as in staging. So I never saw the part of my template that would have caused the error.

Answer 2

I actually had this error due to improperly referencing a helper. My helper was called concatTwo() but in handlebars you have to reference it using kabob-case, which would be concat-two. We had some Handlebars referencing concatTwo which broke those pages and showed this error. Not surprisingly, refactoring it to use the kabob case version fixed the error.

Oddly enough, this didn't cause any problems on the development environment, even when running it with exactly the same data.

Answer 3

Ember-2.6.3

In order to get my development environment to exhibit this behaviour I had to clear my node_modules/ and re-npm-install everything. I also cleared my bower_components and re-bower installed them too. Not sure which made the difference.

I think I agree with @vkoves about the kabob-case for your helpers. But also in addition, I think you must be wary of using dot-notation when referencing helpers or components.

We nested some of our format helpers in a folder named formatters. They look something like this from our Ember app's perspective: app/helpers/formatters/date

We were previously referencing this helper throughout our application as either: {{formatters.date ...}} or (formatters.date ...).

?After some recent changes in the Node/NPM ecosystem?, it appears that we must now refer to our nested helper using a slash-notation rather than dot-notation: {{formatters/date ...}} or (formatters/date ...)

Side Note (Dot-Notation Versus Slash-Notation)

We also just discovered that Ember-2.10 removes dot-notation for referencing components...it apparently is not in the release notes. We have to go fix that everywhere in our app (https://github.com/emberjs/ember.js/issues/14659).