Why can't I import a javascript module in an HTML file?

Question

0.00/5 (No votes)

See more:

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 below.

What I have tried:

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.

Posted 3-Feb-21 0:19am

priyamtheone

Updated 3-Feb-21 2:59am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

raddevus · Answer 1 · 2021-02-03T02:59:00

UPDATE: New Info
The main point is that you need a web server running so you can run your web app.
There are restrictions on the file:\\\ protocol so you can't just double-click your html file and have it run because the browser knows it is loading the files from a file system and is protecting the user.

Now it is up to you to determine which web server you will install. It is a separate technology from your dev environment. Sometimes Visual Studio will provide a web server for the developer but in your case you are saying you don't see that.

That means you will now have to go out and determine which web server technology you will use. If you're on Windows 10 I saw this thing in the app store : https://www.microsoft.com/en-us/p/easy-web-server/9n10mcd0671v
disclaimer: I'm not affiliated with that software at all and I have no idea if you really want to install it. It is an example for you.
Maybe you could just install that and have it point to your web files then you'd load your files from the web server and you (probably) won't get the CORS error you originally saw.

Otherwise go ahead and install Node (and node will install NPM Node Package Manager) and then follow the instructions to run a Node web server :

Follow these instructions to do that:
https://www.npmjs.com/package/http-server

That one will probably be your best one because it will help you in your future development.

###################################################################
The root problem is that it is attempting to access the file via the file protocol and it is not supported via CORS.

'file:///D:/Pendings/Object-orien...

I'm guessing you are examining your page by double-clicking it in the file system and it loads in your browser (which uses the file protocol).

The solution should be to simply run a web server and load the page from the actual server via http.

if you have node and npm you can try:

$ http-server -p 8080

Or in Visual Studio you should be able to "run" the project and iis should load everything up.