I've modularised two classes Person and Teacher exactly as shown down below. But when I'm trying to call the Teacher class and use its methods in Index.html, it's generating an error in the console window of Chrome browser saying: "Uncaught SyntaxError: Cannot use import statement outside a module". I'm using Visual Studio Professional 2017 and opening Index.html with Chrome browser. I'm not using Node. Even if Index.html is opened with Firefox it displays the same error with a little different description: "SyntaxError: import declarations may only appear at top level of a module". My codes follow.
Person.js
export class Person {
constructor(name) {
this.name = name;
}
printName() {
console.log(`My name is ${this.name}.`);
}
}
Teacher.js
import { Person } from "./Person";
export class Teacher extends Person {
constructor(name, degree) {
super(name);
this.degree = degree;
}
printQualification() {
console.log(`My qualification is ${this.degree}.`);
}
}
Index.js
import { Teacher } from "./Teacher";
const teacher = new Teacher('MyName', 'MyQualification');
teacher.printName();
teacher.printQualification();
And finally, Index.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Object-oriented Programming</title>
</head>
<body>
<h1>Object-oriented Programming</h1>
<script src="Index.js"></script>
</body>
</html>
As an alternative, I tried to explicitly define Index.js as a module in Index.html with the following line:
<script type="module" src="Index.js"></script>
But it generates even a bigger error displaying the following two error messages:
"Access to script at 'file:///D:/Pendings/Object-oriented%20Programming_Mosh-Hamedani/Index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https."
"Failed to load resource: net::ERR_FAILED"
Why is this happening? I've stumbled upon it so badly. Just because of this single factor I can't move ahead with the project. So how do I solve it? I'm new in JavaScript and can't figure out the direction. Please help.
