Javascript modules with #babel/standalone - javascript

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?

Related

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

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.

Javascript-modules and Web-Component

I'd like to define a Webcomponent in a Javascript-Module and call a method of this component.
The browser raises an Javascript-error: "helloworld" is not a function.
Strange: If I load the Javascript-File "normally" and not as a module, the function is called.
How can I make it run as a Javascript-Module?
This is the JavaScript-Module main.js:
customElements.define('hello-world',
class MyComponent extends HTMLElement {
helloworld() {
console.log("Hello World");
}
});
This is the HTML-Code:
<!DOCTYPE html>
<html>
<head>
<script type="module" src="main.js"></script>
</head>
<body>
<hello-world></hello-world>
<script>
var instance = document.querySelector( 'hello-world' );
instance.helloworld();
</script>
</body>
</html>
Loading Javascript with
<script src="main.js"></script>
works.
Problem is: Modules are alway loaded asyc and are alway executed after the DOM is loaded.
Therefore the Web-Component is not yet defined when it's instanciated in HTML.
This code works, since the inline-module is executed after the extern module.
<!DOCTYPE html>
<html>
<head>
<title>simple demo</title>
<script type="module" src="main.js"></script>
</head>
<body>
<hello-world></hello-world>
<script type="module" >
var instance = document.querySelector('hello-world');
instance.helloworld();
</script>
</body>
</html>

How use export in an HTML

When I have extern javascript file with an export-statement how can I call this in an HTML ?
An import in a <script> tag also doesn't work.
an include over the <head> gives me a "Unexpected token export" error
For example:
my extern js-File
export function myFunction(text) { return text; }
My HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="myExternFile.js"> </script>
</head>
<body>
<script>
console.log(myFunction("some text"));
</script>
</body>
</html>
According to ECMAScript modules in browsers you can do it with <script type="module">
<script type="module">
import {myFunction} from './myExternalFile.js';
console.log(myFunction("some text"));
</script>
Your function will work without the export. Just make sure to call it between the script tags.

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