Unknown template object error with handlebars 2.0 runtime

Question

I have published all my code as a runnable that uses express for loading static content

I have precompiled this handlebars template:

 <img src="{{coverImage}}"/>
<ul>
    <li>{{title}}</li>
    <li>{{author}}</li>
    <li>{{releaseDate}}</li>
    <li>{{keywords}}</li>
</ul>

Delete

I have obtained this function:

    (function() {
  var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
templates['bookTemplate'] = template(function (Handlebars,depth0,helpers,partials,data) {
  this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
  var buffer = "", stack1, helper, functionType="function", escapeExpression=this.escapeExpression;


  buffer += "<img src=\"";
  if (helper = helpers.coverImage) { stack1 = helper.call(depth0, {hash:{},data:data}); }
  else { helper = (depth0 && depth0.coverImage); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
  buffer += escapeExpression(stack1)
    + "\"/>\r\n    <ul>\r\n        <li>";
  if (helper = helpers.title) { stack1 = helper.call(depth0, {hash:{},data:data}); }
  else { helper = (depth0 && depth0.title); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
  buffer += escapeExpression(stack1)
    + "</li>\r\n        <li>";
  if (helper = helpers.author) { stack1 = helper.call(depth0, {hash:{},data:data}); }
  else { helper = (depth0 && depth0.author); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
  buffer += escapeExpression(stack1)
    + "</li>\r\n        <li>";
  if (helper = helpers.releaseDate) { stack1 = helper.call(depth0, {hash:{},data:data}); }
  else { helper = (depth0 && depth0.releaseDate); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
  buffer += escapeExpression(stack1)
    + "</li>\r\n        <li>";
  if (helper = helpers.keywords) { stack1 = helper.call(depth0, {hash:{},data:data}); }
  else { helper = (depth0 && depth0.keywords); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
  buffer += escapeExpression(stack1)
    + "</li>\r\n    </ul>\r\n<button class=\"delete\">Delete</button>";
  return buffer;
  });
})();

I have added the scripts like this:

 <script src="js/lib/handlebars.runtime-v2.0.0.js"></script>
 <script src="js/templates.js"></script>

I see in Chrome Dev Tools that both scripts load.

However when I use it like this:

 //inside a Backbone view
 template:Handlebars.templates.bookTemplate

I get this error:

 Uncaught Error: Unknown template object: function handlebars.runtime-v2.0.0.js:455template handlebars.runtime-v2.0.0.js:455hb.template handlebars.runtime-v2.0.0.js:644(anonymous function) templates.js:3(anonymous function)

I get this error at line 455 in handlebars runtime @2.0.0 in the function template,upon doing a little debugging I find that templateSpec is a function,but templateSpec.main is undefined:

  //this function makes a call to templates['bookTemplate'] = template(function (Handlebars,depth0,helpers,partials,data) {...} in the `bookTemplate.js`
  function template(templateSpec, env) {
/* istanbul ignore next */
if (!env) {
  throw new Exception("No environment passed to template");
}
//error occurs here: 
if (!templateSpec || !templateSpec.main) {
  throw new Exception('Unkn own template object: ' + typeof templateSpec);
}
...

Additionally I find that Handlebars.templates is an empty object.

What is going on here?

Answer 1

If you precompiled that template with handlebars 1.3.x, you are running into a breaking change with 2.0. Make sure the server/build tools is running the 2.0 handlebars compiler.