I am copy pasting the code from the tutorial here: https://sabe.io/tutorials/getting-started-with-handlebars-js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/require.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.min.js"></script>
<script>
const context = {
name: "Sabe"
};
const template = Handlebars.compile($("#template").html());
$("#template").html(template(context))
</script>
</head>
<body>
<script id="template" type="text/x-handlebars-template">
<p>Hello, my name is {{name}}!</p>
</script>
</body>
</html>However, I am getting
Uncaught ReferenceError: Handlebars is not defined
See: https://jsfiddle.net/pathikrit/kaj74qef/7/
Before someone marks this as a duplicate of this, Uncaught ReferenceError: handlebars is not defined
I tried the answer from that and it also gives an error: https://jsfiddle.net/pathikrit/vw2ds57z/ and my code does not have the problem of wrong order of imports that that question has.