title: Handlebars - You must pass a string or Handlebars AST to Handlebars.compile not working
body: <p>Good Day,</p>
  
  <p>I am trying to create a handlebars demo using an external precompiled file.  Here is my index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Handlebars Demo&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h2&gt;Hello Handlebars!&lt;/h2&gt;
  
  &lt;!--Your new content will be displayed in here--&gt;
  &lt;div class="content-placeholder"&gt;&lt;/div&gt;
  
  &lt;script src="components/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="components/handlebars/handlebars.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/first.js"&gt;&lt;/script&gt;
  &lt;script src="js/finished/first.tpl.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's my javascript:</p>
  
  <pre><code>$(function () {
      // Grab the template script
      var theTemplateScript = $("#address-template").html();
  
      // Compile the template
      var theTemplate = Handlebars.compile(theTemplateScript);
  
      // Define our data object
      var context={
          "city": "London",
          "street": "Baker Street",
          "number": "221B"
      };
  
      // Pass our data to the template
      var theCompiledHtml = theTemplate(context);
  
      // Add the compiled html to the page
      $('.content-placeholder').html(theCompiledHtml);
  });
  </code></pre>
  
  <p>Here's my first.hbs</p>
  
  <pre><code>&lt;!--This is our template. --&gt;
  &lt;!--Data will be inserted in its according place, replacing the brackets.--&gt;
  &lt;script id="address-template" type="text/x-handlebars-template"&gt;
      &lt;p&gt;You can find me in {{city}}. My address is {{number}} {{street}}.&lt;/p&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>I compiled first.hbs this way: </p>
  
  <p>handlebars templates/first.jbs -f finished/first.tpl.js</p>
  
  <p>and my file structure (where my javascript libraries reside in components):</p>
  
  <pre><code>+ HandlebarsDemo
      + components
      + js
          + finished
              + first.tpl.js
          + templates
              + first.jbs
        first.js
    index.html
  </code></pre>
  
  <p>I looked at the following:  <a href="https://stackoverflow.com/questions/24354102/handlebars-pass-a-string-or-handlebars-ast-to-handlebars-compile">Handlebars Pass a string or Handlebars AST to Handlebars compile</a></p>
  
  <p>I understand that I need to have the Handlebars.compile() before theTemplateScript is loaded into the DOM, so I moved my javascript code to the bottom and am still getting this error.</p>
  
  <p>Does anyone have any suggestions?</p>
  
  <p>TIA,</p>
  
  <p>coson</p>