ES6 imports doesn't work - javascript

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>

Related

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

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>

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.

Why am i getting this error in the angular.min.js

Hey after installing angular i made a simple routing script and for some reason the console is saying there is an error in the angular.min.js and i do not know why becuse i got it directly from the anularjs.org website. The console is showing this error.
Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.5.9/$injector/modulerr?p0=englishHosts&p1=Err…
localhost%2Fvendor%2Fbuild%2FAngularJavascript%2Fangular.min.js%3A21%3A332)
at angular.js:38
at angular.js:4683
at q (angular.js:325)
at g (angular.js:4644)
at eb (angular.js:4566)
at c (angular.js:1803)
at Ic (angular.js:1824)
at ue (angular.js:1709)
at angular.js:32379
at HTMLDocument.b (angular.js:3251)
My index.html has
<!DOCTYPE html>
<html lang="en" ng-app="englishHosts">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="../vendor/libs/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../vendor/libs/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="../vendor/build/AngularJavascript/angular.min.js"></script>
<script src="../vendor/build/AngularJavascript/angular-route.min.js"></script>
<script>
var app = angular.module("englishHosts", ["ngRoute"]);
</script>
</head>
<body>
<div ng-view></div>
</body>
</html>
This error still occurs without the app.js. Any help would be helpful.
There is a 'modulerr' error because you don't define the module englishHosts.
Your app.js must contains something like this:
angular.module('englishHosts',[]);
And don't forget:
<script src="app.js"></script>
This appears in the http link : http://errors.angularjs.org/1.5.9/$injector/modulerr?p0=englishHosts...
(look at the p0 parameter in the url)
If you follow this 'error link', you will have some details.
I think the error you are seeing is because you are defining in the html
<html lang="en" ng-app="englishHosts">
and it cannot find the module called englishHosts
// When this is commented out it will throw an error because it cannot find the module declared in the html !
// var app = angular.module("myApp",[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" >
</div>
{
"message": "Script error.",
"filename": "",
"lineno": 0,
"colno": 0
}

Inject javascript entry point into html files with webpack dev server?

Is it possible to inject the JS entry point into the webpack dev server, much like the CSS is injected inline?
For example, my index.html is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>app</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
But what I would like to see is, after running my webpack dev server, something like this (note that the CSS is injected automatically, although I do not see the js reference):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>app</title>
<style>*,*:after,*:before{margin:0;padding:0}html{ /* .. all other styles */ }</style>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/js/app.js?1d8f26165af69413a6bb"></script>
</body>
</html>
Is this possible?
Yes, its possible. You need to use HTML Webpack Plugin
The plugin will generate an HTML5 file for you that includes all your webpack bundles in the body using script tags. Just add the plugin to your webpack config as follows:
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpackConfig = {
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
};
This will generate a file dist/index.html containing the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>

Categories