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.
Related
How to make sure the script tag run in the order I define and also synchronously, because in the module I will import some other module remotely, and then use it later.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script defer="false" async="false" type="module">
// will have import some module remotely here as well
console.log('one');
</script>
<script defer="false" async="false" type="text/javascript">
console.log('two');
</script>
<script defer="false" async="false" type="module">
console.log('three');
</script>
<script defer="false" async="false" type="text/javascript">
console.log('four');
</script>
</body>
</html>
Console Output:
two
four
one
three
My finding is the engine will run all the vanilla script in order first then only run the module script in order. How can I change this behavior?
This question already has answers here:
What does a script-Tag with src AND content mean?
(4 answers)
Closed 1 year ago.
Whenever I connect a JS module, in DevTools' "Sources", the module is shown as connected.
However, the function that I try to run out of it, simply doesn't work.
What can be done to run the function from the module?
function consoleLog () {
console.log('The module is working')
}
export default consoleLog;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="module" src="./module.js">
import consoleLog from './module';
consoleLog();
</script>
</head>
<body>
</body>
</html>
Your problem is that you have code and an src attribute on your script tag, script tags should have one or the other. You also don't have to create a script tag for your module if you import it in another module, like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="module">
import consoleLog from './module.js';
consoleLog();
</script>
</head>
<body>
</body>
</html>
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>
so i am trying to get practice using import and export with javascript. i keep getting errors, "Uncaught SyntaxError: Unexpected token 'export'" and "Uncaught SyntaxError: Cannot use import statement outside a module" its just a simple alert function i am exporting from page1 and importing to main.
HTML:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>module</title>
<link rel= "stylesheet" href="styleSheets/main.css">
<script src= "JS/jquery.js"></script>
<script src= "JS/main.js"></script>
<script src= "JS/page1.js"></script>
</head>
<body>
</body>
</html>
JS/page1:
export function myAlert() {
alert("My Import/Export worked");
}
JS/main:
import {myAlert} from "./page1"
window.onload = myAlert;
You should:
Use import {myAlert} from "./page1.js" (include .js in path)
No need to include <script src= "JS/page1.js"></script> in your HTML
Use type="module" on module script tag (<script src="main.js" type="module"></script>)
Codes:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>module</title>
<script src="JS/main.js" type="module"></script>
</head>
<body>
</body>
</html>
JS/page1.js:
export function myAlert() {
alert("My Import/Export worked");
}
JS/main.js:
import {myAlert} from "./page1.js"
window.onload = myAlert;
If you use babel standalone version this is the way: https://babeljs.io/setup#installation
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>module</title>
<link rel= "stylesheet" href="styleSheets/main.css">
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script text="text/babel">
// Your js code will be here
</script>
<script src= "JS/jquery.js"></script>
<script src= "JS/main.js"></script>
<script src= "JS/page1.js"></script>
</head>
<body>
</body>
</html>
You will use your code with https://babeljs.io/docs/en/babel-core#transform
babel.transform(code: string, options?: Object, callback: Function)
But this is a very inconvenient way of using babel, so I recommend you to use it with a bundler such as Webpack and install babel with npm install, so all these details will be handled by webpack: https://webpack.js.org/
I have exported some variables from a page and tried to import the variables. But it is not working. I researched this issue but not found any solutions. I am using Mac Chrome Version 76.0.3809.100. Any help would be appreciated.
export.js(http://localhost:8888/javascript/es6/export.js)
"use strict";
export const foo = "bar";
export const bar = "foo";
import.js(http://localhost:8888/javascript/es6/import.js)
"use strict";
import { foo } from "export.js"
console.log(foo);
Result
import.html(http://localhost:8888/javascript/es6/import.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="import.js"></script>
</body>
</html>
You cannot use the import syntax on normal <script> tags you need to add the <script type="module"> attribute to it to enable importing:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="import.js" type="module"></script>
</body>
</html>
From MDN script docs and MDN guide on modules here:
type This attribute indicates the type of script represented. The
value of this attribute will be in one of the following categories:
module: Causes the code to be treated as a JavaScript module. The
processing of the script contents is not affected by the charset and
defer attributes.