Ember.js: “Undefined is not a function” in internal bootstrapping process

Question

The code below gives me this error in Chrome's JavaScript console:

Uncaught TypeError: undefined is not a function

Stack trace:

(anonymous function) ember-1.0.0-rc.3.js:22443
b.extend.each jquery-1.9.1.min.js:3
b.fn.b.each jquery-1.9.1.min.js:3
Ember.Handlebars.bootstrap ember-1.0.0-rc.3.js:22432
bootstrap ember-1.0.0-rc.3.js:22454
(anonymous function) ember-1.0.0-rc.3.js:12646
Ember.runLoadHooks ember-1.0.0-rc.3.js:12645
Ember.Application.Ember.Namespace.extend._initialize ember-1.0.0-rc.3.js:26808
(anonymous function) ember-1.0.0-rc.3.js:4504
Ember.handleErrors ember-1.0.0-rc.3.js:411
invoke ember-1.0.0-rc.3.js:4502
iter ember-1.0.0-rc.3.js:4572
RunLoop.flush ember-1.0.0-rc.3.js:4626
RunLoop.end ember-1.0.0-rc.3.js:4531
tryable ember-1.0.0-rc.3.js:4732
Ember.tryFinally ember-1.0.0-rc.3.js:1199
Ember.run.end ember-1.0.0-rc.3.js:4735
autorun

Using Ember's dev version, this error occurs in the bootstrapping process:

Ember.Handlebars.bootstrap = function(ctx) {
  var selectors = 'script[type="text/x-handlebars"], script[type="text/x-raw-handlebars"]';

  Ember.$(selectors, ctx)
    .each(function() {
    // Get a reference to the script tag
    var script = Ember.$(this);

    var compile = (script.attr('type') === 'text/x-raw-handlebars') ?
                  Ember.$.proxy(Handlebars.compile, Handlebars) :
                  Ember.$.proxy(Ember.Handlebars.compile, Ember.Handlebars),
      // Get the name of the script, used by Ember.View's templateName property.
      // First look for data-template-name attribute, then fall back to its
      // id if no name is found.
      templateName = script.attr('data-template-name') || script.attr('id') || 'application',

      /**** ERROR HERE ****/
      template = compile(script.html());

My HTML code (the JS is the sample code taken from Ember's homepage):

<!doctype html>
<html>
    <head>
        <title></title>
    </head>

    <body>

        <div id="mapTemplate">
            <canvas style="border: thick solid black" id="mapDesigner" width="500" height="500"></canvas>
        </div>

        <script src="3rdParty/jQuery/jquery-1.9.1.min.js"></script>
        <script src="3rdParty/HandlebarsJS/handlebars.runtime.js"></script>
        <script src="3rdParty/EmberJS/ember-1.0.0-rc.3.min.js"></script>

        <script type="text/x-handlebars">
            {{outlet}}
        </script>

        <script type="text/x-handlebars" id="index">
            <h1>People</h1>

            <ul>
            {{#each model}}
                <li>Hello, <b>{{fullName}}</b>!</li>
            {{/each}}
            </ul>
        </script>
        <script>
            $(function () {
                App = Ember.Application.create();

                App.Person = Ember.Object.extend({
                    firstName: null,
                    lastName: null,

                    fullName: function() {
                        return this.get('firstName') +
                                    " " + this.get('lastName');
                    }.property('firstName', 'lastName')
                });

                App.IndexRoute = Ember.Route.extend({
                    model: function() {
                        var people = [
                            App.Person.create({
                                firstName: "Tom",
                                lastName: "Dale"
                            }),
                            App.Person.create({
                                firstName: "Yehuda",
                                lastName: "Katz"
                            })
                        ];
                        return people;
                    }
                });

            });
        </script>

    </body>
</html>

Library versions:

Handlebars.js: 1.0.0-rc.3
Ember.js: 1.0.0-rc.3
jQuery: 1.9.1

jsFiddle playground

http://jsfiddle.net/t7qbe/1/

Look at the file/line number indication in the Error and tell us which line it is. In general: this error means that you're using a variable as a function (ie. calling it) but it has no value (undefined). — Halcyon
@FritsvanCampen I've already highlighted the "erroneous" line by a ERROR HERE comment, please take a look at the first code block. Looking at the stack trace, I can see that this error does not come from my code, it is started in Ember. — ComFreek
Look at the function on that line, one of them is bad. So either compile or script.html is not a function. — Halcyon
Pretty sure you want {{#each controller}} not {{#each model}}. — mehulkar
@MehulKar It does still not work. I thought {{#each model}} should iterate over each model and output its fullName property. — ComFreek

mehulkar mehulkar · Accepted Answer · 2013-05-10T18:23:12

The versions of ember and handlebars you were using was off maybe? Not sure what Handlebars runtime is. I replaced them with the correct versions from builds.emberjs.com and now it works.

Ember.js: “Undefined is not a function” in internal bootstrapping process

4 Answers