CODEWITHSUNDEEP
javascriptclassvisual-studio-2017javascript-objects
priyamtheone
priyamtheone

Reputation: 537

Why can't I import a JavaScript module in an html file?

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.

Upvotes: 1

Views: 2641

Answers (1)

MikoYats
MikoYats

Reputation: 116

Since this question is somewhat already answered in another question link, I'll just summarize and change some things.

  1. Install Node.js link
  2. Run npm install -g live-server
  3. Change the ff. in your code:
  • Change the import line in Teacher.js to include the file type. import { Person } from "./Person.js";
  • Change the import line in Index.js to include the file type. import { Teacher } from "./Teacher.js";
  1. Run live-server --port=1234 --entry-file=Index.html (Ensure you're running it on the same folder as your files.

Things to take note of:

  • We changed the imports to include file type because so far without the help of some tools, ambiguity of what to import is not supported. (more details here)
  • We used an HTTP server to fix the CORS policy issue due to the browser's inability to import stuff locally because of permission stuff.

Upvotes: 1

Related Questions