Uncaught ReferenceError: Handlebars is not defined when using handbelar.js - javascript

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/jquery#3.6.3/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/requirejs#2.3.6/require.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/handlebars#4.7.7/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.

Related

Javascript modules with #babel/standalone

I am trying to use Javascript import with #babel/standalone, and I am getting this error:
Uncaught ReferenceError: require is not defined
This is my minimal reproducible code:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script type="text/babel" data-type="module">
import a from './abc.js';
console.log(a);
</script>
</head>
<body>
</body>
</html>
And abc.js file:
export default 567;
What am I doing wrong?

Uncaught TypeError: Cannot read property 'nodeType' of null

I'm trying to do a knockout.js project for school and I need to bind an observable array to a select dropdown. The following code does not work and gives this error on the applyBindings line:
Uncaught TypeError: Cannot read property 'nodeType' of null
Any ideas? This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script src="knockout.js"></script>
<script>
function ViewModel() {
var self = this;
self.options1 = ko.observableArray([{id: 0, name: "Example option"}]);
}
ko.applyBindings(new ViewModel());
</script>
</head>
<body>
<!-- page content -->
<select data-bind="options: options1"/>
</body>
</html>
You should not call ko.applyBindings until you're sure the DOM's loaded. Currently, in your code, you execute applyBindings right when that line of code hits. At that point, the body tag hasn't even been encountered yet by the browser, so it won't know what to bind to.
A quick fix would be:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script src="knockout.js"></script>
</head>
<body>
<select data-bind="options: options1"/>
<!-- page content -->
<script>
function ViewModel() {
var self = this;
self.options1 = ko.observableArray([{id: 0, name: "Example option"}]);
}
ko.applyBindings(new ViewModel());
</script>
</body>
</html>
Alternatively, you could defer said code until the DOM's loaded. If you're also using jQuery in your project you could use the $(document).ready idiom for that.

Uncaught Error: [$injector:modulerr] http ... (with plain HTML)

I have been receiving the following error since I started learning AngularJS:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.5/$injector/modulerr?p0=ToDo&p1=Error%3A%20…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.5%2Fangular.min.js%3A17%3A315)
In my efforts to debug this error, I started stripping down my HTML script by script until I was left with an empty HTML that only contained ng-app declaration and <script> to import the angular.min.js via CDN.
Please Help !!
Here's what my html looks like::
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"> </script>
</html>
Made a silly mistake,
the <script> has to go within the <body> tags. Here is what solved the problem.
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Obligatory</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
</html>
</body>
I guess I was more more dumb that I had anticipated :)

Ember issue: Uncaught Error: Could not find module handlebars

index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Let's learn Ember.js</title>
<script src="jquery-1.10.2.js"</script>
<script src="handlebars-1.1.2.js"</script>
<script src="ember-1.5.1.js"</script>
<script>
window.App = Ember.Application.create();
</script>
</head>
<body>
<script type="text/x-handlebars" data-template-name="index">
<h1>Welcome to Ember.js!</h1>
</script>
</body>
</html>
jquery, handlbars and ember are in the same folder as index.html.
When I opened index.html in the Chrome (the address line of the browser looks: file:///home/askar/work/ember/emberjs/index.html ), In the Console tab of Inspect Element I'm getting the error:
Uncaught Error: Could not find module handlebars ember-1.5.1.js:251
requireModule ember-1.5.1.js:251
(anonymous function) ember-1.5.1.js:27031
(anonymous function) ember-1.5.1.js:27317
(anonymous function) ember-1.5.1.js:44267
What am I doing wrong?
Couldn't find any related posts.
It is because your script tags are missing the closing angle brackets.
Try this:
<script src="jquery-1.10.2.js"></script>
<script src="handlebars-1.1.2.js"></script>
<script src="ember-1.5.1.js"></script>

Uncaught TypeError: Object prototype may only be an Object or null on ember.js

I'm trying to get started with ember.js, so I've followed the tutorials as closely as I can. I currently have this HTML:
<!doctype html>
<html>
<head>
<script type="text/x-handlebars" data-template-name="application">
Test
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="ember-1.0.0-rc.1.min.js"></script>
<script src="handlebars.runtime.js"></script>
<script src="app.js"></script>
</head>
</html>
Where app.js is:
App = Em.Application.create();
and in Chrome I am getting:
Uncaught TypeError: Object prototype may only be an Object or null ember-1.0.0-rc.1.min.js:18
Where am I going wrong?
Thanks!
Some suggestions:
follow my instructions here: Ember.js missing modules?
respect the order of the script tags (jquery -> handlebars -> ember)
create a body tag, ember needs to be able to write to it
put the script tags right before the </body> tag
Resulting in:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bitshiftcop.com</title>
</head>
<body>
<script type="text/x-handlebars" data-template-name="application">
Test
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="handlebars-1.0.0-rc.3.js"></script>
<script src="ember-1.0.0-rc.1.js"></script>
<script src="app.js"></script>
</body>
</html>

Categories