Why is browser returning error “TypeError: this._input is null” in Firefox (and similar in Chrome) when using handlebars.js?

Question

This is the code I am trying out: http://jsfiddle.net/sbrsK/10/
It runs correctly without any error in jsfiddle

Trying to run the same via a web-server locally on my computer does not work. The following files are being loaded:

• index.html
• app.js

In Firefox I get this error:

TypeError: this._input is null @ http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js:364

In chrome I get this error:

Uncaught TypeError:Cannot call method 'match' of null
under match = this._input.match(this.rules[rules[i]]); in handlebars-1.0.0.beta.6.js

There is a very similar problem raised earlier in this link, but seems that it is still open.

So the question is why is this error happening when it works correctly in jsfiddle? What is the correct way to run this locally?

Answer 1

That error means that #entry-template isn't in the DOM when you try to use it:

var source = $("#entry-template").html(); // There is no #entry-template in the DOM here
var template = Handlebars.compile(source);

That means that you end up trying to compile undefined as a Handlebars template and that doesn't work. You can see the error by running this:

http://jsfiddle.net/ambiguous/LprDR/

with your console open.

The jsfiddle works because you have all your code running after the DOM has been loaded, that's the default jsfiddle behavior.

You probably have a load order problem in your real code, try wrapping it in a $(function() { /*...*/ }) wrapper.