CODEWITHSUNDEEP
javascripthtmlember.jshandlebars.js
ComFreek
ComFreek

Reputation: 29444

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

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/

Upvotes: 2

Views: 3384

Answers (4)

Darshan Sawardekar
Darshan Sawardekar

Reputation: 5075

I ran into this problem today while migrating an older ember app. The problem is caused by mixing templates of type x-handlebars and x-raw-handlebars.

If you compile your templates in production, then your build system is likely only bundling handlebars.runtime.js which is a subset of handlebars without the ability to compile templates. This is fine since your templates are already compiled to javascript.

However if you add some script x-handlebars tags to your html, Ember will as part of its bootstrapping process look to precompile those templates. But without the full handlebars library it will fail at the compile function.

Solution: If you need the ability to compile handlebars while still using compiled templates, ensure that your build system contains the complete handlebars library, and not just the runtime.

Upvotes: 3

mehulkar
mehulkar

Reputation: 4974

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.

Upvotes: 2

Mike.
Mike.

Reputation: 65

Update for 2014 -

Ran into same error when I switched to cloudflare. This one was a real time suck to track down. Wish there had been a better message.

Was using: 

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.runtime.min.js"></script>

Swapped to:

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>

and error went away.

Upvotes: 1

ChrisCast
ChrisCast

Reputation: 208

I doubt the minification was the problem. The runtime version of Handlebars is intended to work only with precompiled templates. In this case, Ember will try to compile your inline templates anyway. More from the Handlebars site: http://handlebarsjs.com/precompilation.html

Here's a working version of your JsFiddle, where I swapped out the .runtime Handlebars for the full version.

Upvotes: 0

Related Questions