Why a module is shown connected but still not working? [duplicate] - javascript

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>

Related

How to make browser run module code first before normal text/javascript

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?

Is it possible to choose JavaScript runtime environment (rhino...etc) when sourcing a JavaScript file in html?

Is it possible to choose JavaScript runtime environment (rhino...etc) when sourcing a JavaScript file in html ??
<script type="text/javascript" src="file.js"></script>
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="file_1.js"></script>
<script src="file_2.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
</head>
<body>
<p id="test">abc</p>
</body>
file_1.js:
window.paragraph = readFile('file_to_read.tcl');
localStorage.setItem("paragraph", paragraph);
file_2.js:
setTimeout(function(){
document.getElementById("test").innerHTML = window.paragraph;
}, 3000);
need to read the "file_to_read.tcl" and then pass the "paragraph" variable to the second js file "file_2.js"
but still finding this issue : "ReferenceError: readFile is not defined"
thanks

I have exported some variables from a page and tried to import the variables. But it is not working

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.

ES6 imports doesn't work

b.js:
const x = 1;
export {x};
a.js:
import {x} from 'b'; // <<-- ERROR
console.log(x);
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="a.js"></script>
</body>
</html>
Error:
Uncaught SyntaxError: Unexpected token {
I'm using WebStorm and running the project in Chrome in Win7.
Update:
I changed index.html content to:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="a.js" type="module"></script>
</body>
</html>
Error:
Uncaught TypeError: Failed to resolve module specifier "b". Relative references must start with either "/", "./", or "../".
It seems that b.js is not loaded.
To use ES6 modules, you have to load the script using type="module" - this ensures that browsers that do not understand ES6 modules won't choke on it
Next, to import, you must specify path and full filename of the imported file
See comments in code
b.js
const x = 1;
export {x};
a.js
// specify the path and full filename below
import {x} from './b.js'; // <<-- NO ERROR NOW
console.log(x);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- add type="module" -->
<script src="a.js" type="module"></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.

Categories