Handlebars.compile not working in the page. But, working from console

Question

// I have below code in a html page. I am trying this to learn Handlebars.compile function.

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js">
</script>
    
<script>
    // compile the template
  let template = Handlebars.compile("Hello {{message}}");
  // execute the compiled template and print the output to the console
  console.log(template({ message: "My friend" }));
</script>

//this outputs in console as - Hello
//But when I test this from console for the same page, like for example

let template2 = Handlebars.compile("Hello {{message}}");
console.log(template2({ message: "My friend" }));
//It outputs - Hello My friend

//I am wondering why same is not working from the page.