ember Error: Compile Error: is not a helper - ember.js

I got the following error while developing our front-end with Ember.js:
ember Error: Compile Error: '...' is not a helper
What is the meaning of this error?

Reason
Ember throws this error if there is no component or helper with the given name is not found in your project or your dependent addons.
How to solve
You should check the name of the component or helper that you have written (possible errors are spelling errors or writing directory structure of the component incorrectly).
This twiddle shows example of this error message when the component my-component is called as {{my-component2 x=x}} instead of {{my-component x=x}} mistakenly.

This error can also happen in older (pre-Octane) versions of Ember if you have your component in all the right places, but your component doesn't have a dash in its name. As per the docs, components are required to have at least one dash in their names:
Components must have at least one dash in their name. So blog-post is an acceptable name, and so is audio-player-controls, but post is not. This prevents clashes with current or future HTML element names, aligns Ember components with the W3C Custom Elements spec, and ensures Ember detects the components automatically.
If you try to create a component without a dash in its name, Ember won't find it and will give you this error.
It appears this requirement has been lifted in more recent versions of Ember, where components start with a capital letter to distinguish them from native HTML elements.

From the documentation:
Helpers allow you to add additional functionality to your templates beyond what is included out-of-the-box in Ember. Helpers are most useful for transforming raw values from models and components into a format more appropriate for your users.
It looks like you are using a non-defined helper. So please look through (and maybe provide) some more of your log output. You are probably using an undefined helper in one (or multiple) of your .hbs-files.

component and file name must be the same. This solution worked for me.

Related

Why am I getting this error when I use Ember.View.extend?

I'm getting the following error:
Uncaught TypeError: Cannot read property 'extend' of undefined
when I try to use:
Ember.View.extend
I read that Views have been removed, what should I use instead?
Thanks,
Katie.
Ember.Views are deprecated from Ember 2.0. But still it can be used with the support of their ember-legacy-views addon. Even this addon will be only compatible for the versions before v2.4.The object Ember.CoreView from which Ember.Views is extended is also deprecated.
So the best way is to use Ember.Component. Like Views, Components are too re-usable and isolated from others with its own context with the template.
Refer for more info on Ember.View deprecation and steps to migrate from Views to Components

Runtime Error on 'Editable' when using Glass.Mapper in Sitecore8.1

I have Sitecore8.1 MVC with Glass.Mapper.Sc package (from NuGet) installed. I need to use the 'Editable' method in my cshtml, but I keep getting a runtime error:
The name 'Editable' does not exist in the current context
Do I need other DLLs, or usings or config updates etc..?
Use #Html.Glass().Editable(). The HTML helper was introduced in 4.0.0.4. It allows you to skip inheriting from GlassView<T> and works with both controller and view renderings.
You have to use it in a Controller Rendering and not a View Rendering. Its in the Glass.Mapper.Sc.Web.Mvc.GlassView class. See this link for a working example.
http://www.seanholmesby.com/sitecore-mvc-page-editor-friendly-views-with-glass-mapper/

Ember Mixin undefined in controller

May be a silly question, but can't seem to get this right. I have some actions that I'd like to share across two controllers, so I'd like to define them in a mixin and then include them in the controllers. My syntax matches what I've seen in the guides:
mixins/shared.js.coffee
Dashboard.Shared = Ember.Mixin.create
actions:
showTab: (tab) ->
//handle action here
controllers/messages/messages_contacts_show_controller.js.coffee
Dashboard.MessagesContactsShowController = Ember.ObjectController.extend Dashboard.Shared,
Upon loading the app, I have this error:
Uncaught Error: Assertion Failed: Expected hash or Mixin instance, got [object Undefined]
I'm not sure how to load this mixin before the controller since my files are separate (ref: what is the correct way to use coffeescript with emberĀ“s Mixins?'ve tried importing it but keep getting "reserved word" errors from coffeescript.
import { Shared } from './mixins/shared'
and
import Shared from "./mixins/shared"
What's the proper way to get a mixin to load before the controllers it will be used in??
I'm using Ember 1.8.1
Assuming you require your JS files in some main App script, the problem is most likely that "MessagesContactsShowController" sorts before "Shared". When you require with a wildcard, the files are included in alpha order. You might try moving your Shared mixin to a different folder and then changing the order of your require statements so it is processed before MessagesContactsShowController

cannot load a custom helper

I have wrote a highlight helper follow the ember guides.
app/helpers/highlight.js
export default Ember.Handlebars.makeBoundHelper( function(value, options) {
var escaped = Handlebars.Utils.escapeExpression(value);
return new Ember.Handlebars.SafeString('<span class="highlight">' + escaped + '</span>');
});
I invoke the helper in the application template with {{highlight name}} and declare the name in application controller . When visit the index page I got this error
Assertion Failed: A helper named 'highlight' could not be found. Seems the helper is not loaded. Is there any configuration to load the helper ?
I assume that you use ember-cli, as you tagged it this way.
Plain ember and ember-cli are using different resolvers (basiclly mechanisms that search for files in proper directories) and thus have a little bit different name conventions. Helpers in ember-cli must have a dash in their name.
Take notice that if you only put the code you mentioned in your question, this file will have no information what is Ember. You still need to import Ember using modules. Very nice introduction can be found here.
To sum up, change your helper file name to one that includes a dash and the helper will be recognized across the environment.

EmberJS - A way to log undefined bindings

Is there a way to get Ember to log a warning or error if you reference a property that doesn't exist? Currently if you misspell a the name of a property bound in your handlebar template there is no warning, it just doesn't show anything, and it can be hard to find which property is incorrect.
I have LOG_BINDINGS enabled, which helps somewhat, but there is a lot of unrelated stuff to sort through.
There isn't any sort of general built-in debugging that I have found, but there is a mechanism to add your own.
Ember.Object calls a method 'unknownProperty' any time a 'get' call returns undefined. You can add a console.warn to this method to log the property. The documentation describes it as a way to make custom abstract method type handling.
http://emberjs.com/api/classes/Ember.Observable.html#method_get
Ember.Object.reopen(
unknownProperty: (property) ->
unless property is 'App' or property is 'Ember'
console.warn "Unknown property #{property} in #{#toString()}"
)
Notice the filtering of the global namespaces 'App' and 'Ember' - all calls to global properties still go through this interface, but for what we care about they are red herrings.
Unfortunately, if you try to do this by reopening Ember.Object itself, you get a bunch of junk you don't care about, because apparently this happens all the time, especially in the EventManager classes. I have gotten around this by applying it to Ember.ArrayController, Ember.ObjectController, and a Model class that all of my models inherit from.
I now get a neat warning message on the console instead of a blank page every time I accidentally type "hight" into handlebars instead of "height"
In a production solution one would want to link this to some kind of "debug" option in the build, I assume.
One half solution might be to use the log handlebars helper to log the property before using it, unfortunately a non existent property causes the template to not display at all. This is a common problem with handlebars not displaying errors.
{{log myProperty}}