Debugging Ember for Absolute Beginners

Jen Weber
Ember-ish
Published in
6 min readMar 5, 2017

You just want things to render while you’re doing the tutorial in the Ember Guides… is that too much to ask?!?! Here are common mistakes, what the errors look like, and how to fix them.

Common Mistakes

  1. Missing # or / in conditional template helper
  2. Missing # or / in each helper
  3. Using a semicolon instead of a comma inside the actions of a component.js
  4. Forgetting to return something from the model hook
  5. Missing quotation marks in gets and sets
  6. Copying and pasting files instead of using the Ember CLI to generate them
  7. Using an npm package without ember-browserify
  8. Silly typos (that you’ll take forever to find without a systematic strategy)

1. Missing # or / in conditional template helpers

The Correct Syntax: {{#if isWorking}} show some text {{/if}}

The symptoms: Forgetting a #, /, or both will cause one of three different errors…

Caused by forgetting a # in an if helper. Read the error message and you’ll know which line is causing the problem. Build error, Parse Error, Broccoli Plugin failed, expecting EOF, got OPEN_ENDBLOCK
Caused by forgetting a / in an if helper or forgetting to close it altogether. Read the error message and you’ll know which line is causing the problem. Build error, Parse Error, Broccoli Plugin failed, expecting OPEN_INVERSE CHAIN, INVERSE, OPEN_ENDBLOCK, got EOF
Caused by forgetting both # and / in an if helper. Click on the arrows next to the error message in the developer console to see the whole thing. It won’t tell you which line, so search your whole project for “{{if”. Uncaught EmberError: Assertion Failed: The inline form of the `if` helper expects two or three arguments, e.g. `{{if trialExpired “Expired” expiryDate}}`.

About this last error message, it’s especially confusing because it’s recommending a different usage of “if” than you’re probably trying to do. There are three kinds of if helpers (aka Conditionals) in Ember. You can learn more about them in the Ember Guides.

2. Missing # or / in each helper

The correct syntax:

{{each superheroes as |hero|}} 
<li>{{hero.name}}</li>
{{/each}}

The symptoms: Like the if helpers, forgetting a #, /, or both in an each helper causes different errors…

Caused by forgetting a #, or both # and / in an each helper. Read the error message and you’ll know which line is causing the problem. Build error, Parse Error, Broccoli Plugin failed, Expecting CLOSE, OPEN_SEXPR, ID, STRING, NUMBER, BOOLEAN, UNDEFINED, NULL, DATA, got OPEN_BLOCK_PARAMS
Caused by forgetting a / in an each helper, or forgetting to close the helper altogether. Read the error message and you’ll know which line is causing the problem. Build error, Parse Error, Broccoli Plugin failed, Expecting OPEN_INVERSE_CHAIN, INVERSE, OPEN_ENDBLOCK, got EOF

3. Using a semicolon instead of a comma inside the actions of yourComponent.js

The correct syntax: Your actions are an object, similar to var person = { name: "Tony Stark", alias: "IronMan", handsome: true} . But developers have a habit of putting ; at the end of functions, when in reality each function in your actions object should be separated by a comma.

There are a few symptoms:

Angry linter. No amount of curly braces will satisfy it. There should be a comma, not a semicolon, in between these two actions.
There should be a comma in between these two actions. Read the error message and you’ll know which line is causing the problem. Build error, Parse Error, Broccoli Plugin failed, Unexpected token

4. Forgetting to return something from the model hook

The correct syntax:

model() {
return this.store.findAll('hero');
}

The symptoms: If you forget the “return” in your model hook, your data will simply be missing in your app. There may possibly be no errors in the console, no alerts from vegetables, nada.

The diagnosis: The easiest way to figure out what’s going on is to put {{log yourModelName}} in the template where you are trying to use the data. If it prints “null” to the console, you’ll have an idea of what’s going on, and should check the model hook in yourRouteName.js. Using this log helper is a quick and easy way to narrow down the problem. You could also check the network tab of your developer tools to see what API calls, if any, are being made.

5. Missing quotation marks in gets and sets

The correct syntax: this.get('modelName')

The symptoms: it’s so easy to forget those quotation marks, and it might send you barking up the wrong tree.

Caused by something like this.get(model) when you should be doing this.get(‘model’). Uncaught Reference Error: model is not defined

6. Copying and pasting files instead of using the Ember CLI to generate them

Copying and pasting files around in Ember is A Very Bad Thing. Don’t do it. Once, a senior developer and I spent the better part of the day debugging an Ember app that had a route file in the wrong folder. Additionally, there are restrictions on how you can name files in Ember, so if you rename things, you might do it wrong.

The right way: never copy and paste files. Especially not routes. You should use Ember’s command line tool (aka CLI) to generate files. For example, ember g component my-component-name or ember g route parentroute/childroute Consult the Ember CLI documentation for more details.

The symptoms of The Very Bad Thing: The symptoms can manifest themselves in a thousand different ways. It’s impossible to cover them all. If you’re at your wits end debugging a component, helper, or route that can’t be found, you likely either have a spelling error/typo in its name, or you’ve put those files in the wrong place.

7. Using an npm package without ember-browserify

You can’t just use npm packages willy nilly in Ember. There are many in-depth articles on various options, but I’ll share the easiest solution.

The right way: First, check Ember Observer to see if someone has already gone through the work to make the npm addon easy to use in Ember.

No ember addon? Good news, you can still use that npm package. Do ember install ember-browserify in the command line. Why ember-browserify?It’s a long story… maybe don’t read it right now. Then, if you haven’t already done this, npm install --save-dev package-name . Don’t forget to restart your server. In order to use the npm package in one of your JavaScript files, you need to import it at the top, like so:

import 'moment' from 'npm:moment';

The symptoms of not using browserify, like import moment from ‘moment';

Caused by incorrectly trying to use npm packages. Nothing renders, could not find module imported from…

8. Silly typos (that you’ll take forever to find without a systematic strategy)

Some of these tips are basic developer debugging skills, but here are a few to get you started when something is not defined, can’t be found, etc:

  • console.log(‘my filename and function name’, thingToLog) and I put it in every function that could possibly be causing the problem. Then you’ll see where the chain of “Data down, actions up” is broken
  • use {{log yourModelName}} anywhere in a template where you expect to see some data that’s not showing up
  • Do a text search of your entire project for the name of the thing that’s missing. It’s really easy to miss a letter. If your search has too few results, you’ll know what’s wrong.
  • Compare your Ember Data requests with the response from the API (go to your developer inspector, choose the network tab, click on each request, and look at the response tab). Your typo might be in the back end!

If you are still stuck…

… hop on the Ember Community Slack and post in the #help channel. It helps to state your experience level with Ember when you’re asking a question, so that other users will give more detailed explanations and use less jargon. It’s ok to ask clarifying questions. Try to be patient… you may not get a response for a few hours. Everyone is welcome :)

--

--

Jen Weber
Ember-ish

Huge fan of Ember.js, open source, HTML, and accessible, inclusive web apps. www.jenweber.me