Javascript module not working in browser?

by

0. The short answer

You need to install and run a local web server. – For a suggestion on how,
read on.

1. The basics

I tried a simple HTML file – index.html – as follows:

<!-- index.html - minimal HTML to keep it simple -->
<html>
<head>
  <meta charset="UTF-8">
  <link rel="shortcut icon" href="#">
</head>
<body>
  <h1>Hello world!</h1>
  <p>Experimenting with JavaScript modules.</p>
  <script type="module" src="js/functions.js"></script>
</body>
</html>

In the subfolder js I put the JavaScript file functions.js:

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

When double-clicking index.html, my default web browser – Firefox 89.0
(64-bit) – shows the following, after pressing F12.
Notice how the JavaScript code is not running:

JavaScript not working in browser.

The error message:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/stackexchange/reproduce/jsModule/moduleNW/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 without errors.

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

2. Install and run a local web server

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.exe.)
  • 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. 1
    (On Ubuntu, you can try sudo apt install -y nodejs.)
  • Install live-server: npm install live-server -g.
  • Change directory to where your page lives: cd <path-to-index.html>.
  • Start the server: live-server .
    (Should open localhost:8080 in your default browser and show the alert.
    See below.)

JavaScript running locally on live-server.

Note 1.
I am on Windows 10, but the above instructions should work fine on Linux and
macOS too.
Note 2.
Here I used Firefox 89.0, but I have tried Google Chrome 91.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/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, chrome-untrusted, https.

3. Exporting and importing

Next I create a new folder demo2 containing the following demo2.html:

<!-- demo2.html - even shorter HTML for simplicity -->
<body>
  <h1>Hello world!</h1>
  <p>Javascript modules.</p>
  <script type="module" src="js/main.js"></script>
</body>

I also create the following three JavaScript files in the subfolder 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();

Now I run live-server from the terminal in the folder where demo2.html
resides.
This time I start by typing
live-server --port=1234 --entry-file=demo2.html
and hitting Enter. Screenshot:

JavaScript running when called from several sub-modules.

References:

1 On Windows 10, I once needed to
repair the installation.

More Related Contents:

  1. How does Access-Control-Allow-Origin header work?
  2. Origin is not allowed by Access-Control-Allow-Origin
  3. CORS error on same domain?
  4. Firefox ‘Cross-Origin Request Blocked’ despite headers [closed]
  5. Understanding AJAX CORS and security considerations
  6. javascript modules and CORS
  7. Is CORS a secure way to do cross-domain AJAX requests?
  8. Canvas tainted by cross-origin data
  9. Cross-domain requests stopped working due to no `Access-Control-Allow-Origin` header present in the response
  10. How does the ‘Access-Control-Allow-Origin’ header work?
  11. Cross-domain connection in Socket.IO
  12. http request has been block from https
  13. How do I use namespaces with TypeScript external modules?
  14. how to bypass Access-Control-Allow-Origin?
  15. enabling cross-origin resource sharing on IIS7
  16. How to make cross domain request [duplicate]
  17. JavaScript module pattern with example [closed]
  18. Is it possible to trap CORS errors?
  19. ES6 modules in the browser: Uncaught SyntaxError: Unexpected token import
  20. cross domain localstorage with javascript
  21. Dynamic require in RequireJS, getting “Module name has not been loaded yet for context” error?
  22. Reason behind this self invoking anonymous function variant
  23. Uncaught ReferenceError: process is not defined
  24. Facebook: Unsafe JavaScript issue (document.domain values should be same)
  25. Three.js and loading a cross-domain image
  26. CORS error for application running from file:// scheme
  27. CORS and Google Maps Places Autocomplete API calls [duplicate]
  28. How to resolve Node.js ES6 (ESM) Modules with the TypeScript Compiler (TSC). TSC doesn’t emit the correct file-ext
  29. iframe not reading cookies in Chrome
  30. How to get data with JavaScript from another server?

Leave a Comment