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.
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.
-
1
You need to include
type="module"in your script tag. And the other resource (b.js) has to be available to the page. – KarelG Commented Aug 7, 2018 at 6:33 -
the issue is likely that for ES6 modules to work in javascript, you need the
type="module"attribute on the script tag – Jaromanda X Commented Aug 7, 2018 at 6:37 - Webstorm has nothing to do with this. It's just an IDE. It won't actually run the code – apokryfos Commented Aug 7, 2018 at 6:37
- 1 @AshishGaur not even close to a duplicate – Jaromanda X Commented Aug 7, 2018 at 6:38
-
1
sorry, didn't read
a.js...import {x} from './b.js'– Jaromanda X Commented Aug 7, 2018 at 6:44
2 Answers
Reset to default 8To 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 ments 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>
set "type": "module" in the package.json or use the .mjs extension.