Javascript module not working in browser?

Question

Alright, I have looked on this site and have found several different answers, none of which have worked for me. Basically had a js file that had many functions in it along

Answer 1

1. The basics

I tried some simple HTML code as follows:

  
  


  
Hello world!
  
Experimenting with JavaScript modules.
  

And the JavaScript code is just one line - not counting the comment:

// js/functions.js
alert("Hello");

My web browser shows the following. Notice how the JavaScript code is not running:

A recommended action for an issue like this, is to open the browser's development tools, typically by hitting F12 on the keyboard. Here is what Firefox 77 says:

In text: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/stackexchange/reproduce/jsModule/RobotMan/basics/js/functions.js. (Reason: CORS request not http).

A cheating "solution" is to (temporarily) remove type="module" from the HTML code.
The alert then displays as intended - without errors.

---

But I want to run the JavaScript as a module, so I put back type="module" into the HTML file.

Actually, to run it as a module, it needs to run on a web server. Thus, if you want to run the code on your own computer, you will need to (install and) start a local web server. One currently popular alternative is live-server.
Here is what worked for me.

• Open a terminal. (On Windows: cmd.)
• Type npm and hit Enter to see if Node.js is installed.
• If you get command not found, download at https://nodejs.org/en/download/ and install.
• Install live-server: npm install -g live-server (per-user installation).
• Change directory to where your page lives: cd .
• Start the server: live-server demo.html
  (Should open localhost:8080 in your default browser and show the alert. See below.)

Note 1: I am on Windows 10, but the above instructions should work fine on Linux and macOS too.
Note 2: I have used Firefox 77.0 above, but I tried Google Chrome 83.0 as well. The only notable difference is the CORS error message, which in Chrome reads: Access to script at 'file:///C:/stackexchange/reproduce/jsModule/RobotMan/basics/js/functions.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

2. Exporting and importing

Create a new folder modules containing the following demo2.html:

  
Hello world!
  
Javascript modules.
  

Also create the following three JavaScript files in the sub-folder js:

// js/module1.js
export function hi() {console.log("Hi from module 1.");}

and

// js/module2.js
export function howdy() {console.log("Howdy from module 2!");}

and

// js/main.js
import {hi} from './module1.js';
import {howdy} from './module2.js';
hi();
howdy();

Run live-server from the terminal in the folder where demo2.html resides. This time start it by typing live-server --port=1234 --entry-file=demo2.html and hitting Enter. Expect to see something like:

References:
https://gist.github.com/donmccurdy/20fb112949324c92c5e8
https://javascript.info/import-export
https://stackoverflow.com/questions/39578877/live-server-cant-find-the-file-specified#43717740