title: Why does my Handlebars not have a compile method?
body: <p>I am setting up a <code>Backbone</code> project with <code>Handlebars</code> and I am having an issue with <code>Handlebars</code> not finding the compile method.  Here is my config file:</p>
  
  <pre><code>require.config({
    hbs: {
      templateExtension: '.hbs'
    },
    paths: {
      backbone: "libs/backbone/backbone",
      handlebars: 'libs/handlebars/handlebars.amd',
      hbs: 'libs/requirejs-hbs/hbs',
      jquery: 'libs/jquery/jquery',
      jqueryMockAjax: 'libs/jquery-mockjax/jquery.mockjax',
      text: 'libs/requirejs-text/text',
      templates: 'templates/',
      underscore: 'libs/underscore/underscore'
    },
    shim: {
      backbone: {
        deps: [
          'underscore',
          'jquery'
        ],
        exports: 'Backbone'
      },
      hbs: {
        deps: ['handlebars'],
        exports: 'hbs'
      },
      jqueryMockAjax: {
        deps: [ 'jquery' ],
        exports: '$.mockjax'
      },
      underscore: {
        exports: '_'
      }
    }
  });
  
  require(['app'], function(App) {
    'use strict';
  
    var app = new App();
    app.render();
  });
  </code></pre>
  
  <p>Here is the <code>app.js</code> that I am trying to render:</p>
  
  <pre><code>define(function(require) {
  
    var Backbone = require('backbone');
    var testTemplate = require('hbs!templates/test');
  
    var router = Backbone.View.extend({
      el: $('body'),
      template: testTemplate,
      render: function() {
        return $(this.el).html(this.template());
      }
    });
  
    return router;
  });
  </code></pre>
  
  <p>When <code>Handlebars</code> calls the <code>hbs.js</code> file on line 25 it cannot find the <code>compile</code> function</p>
  
  <pre><code>define(["handlebars"], function(Handlebars) {
    var buildMap = {},
        templateExtension = ".hbs";
  
    return {
  
      // http://requirejs.org/docs/plugins.html#apiload
      load: function (name, parentRequire, onload, config) {
  
        // Get the template extension.
        var ext = (config.hbs &amp;&amp; config.hbs.templateExtension ? config.hbs.templateExtension : templateExtension);
  
        if (config.isBuild) {
          // Use node.js file system module to load the template.
          // Sorry, no Rhino support.
          var fs = nodeRequire("fs");
          var fsPath = config.dirBaseUrl + "/" + name + ext;
          buildMap[name] = fs.readFileSync(fsPath).toString();
          onload();
        } else {
          // In browsers use the text-plugin to the load template. This way we
          // don't have to deal with ajax stuff
          parentRequire(["text!" + name + ext], function(raw) {
            // Just return the compiled template
   ****HERE onload(Handlebars.compile(raw));
          });
        }
  
      },
  
      // http://requirejs.org/docs/plugins.html#apiwrite
      write: function (pluginName, name, write) {
        var compiled = Handlebars.precompile(buildMap[name]);
        // Write out precompiled version of the template function as AMD
        // definition.
        write(
          "define('hbs!" + name + "', ['handlebars'], function(Handlebars){ \n" +
            "return Handlebars.template(" + compiled.toString() + ");\n" +
          "});\n"
        );
      }
  
    };
  });
  </code></pre>
  
  <p>The <code>Handlebars</code> variable gives me the Handlebars environment, but it has an extra layer in it, so I have to change that line to <code>Handlebars.default.compile(raw)</code>.  Where is that <code>default</code> object coming from and how do I get rid of it?  I wouldn't worry about it, but if I pull down this project somewhere else I am always going to have to remember to do that.</p>