JavaScript || Using API with ES6 modules

Question

I am currently practing using API with es6 Modules in JS (vanilla).

app.js

import Game from './model/Game';

const proxy = 'https://cors-anywhere.herokuapp.com/';
let key = 'MY_API_KEY_PRIVATE'; //kept private for StackOverflow
let steamID = '76561197996900532';

getOwnedGames();

async function getOwnedGames() {

    try {

        const result = await fetch(`${proxy}http://api.steampowered.com/IPlayerService/GetOwnedGames/v0001/?key=${key}&steamid=${steamID}&format=json&include_appinfo=true`);

        const data = await result.json();
        let gamesList = data.response.games;

        console.log(gamesList);

    } catch(error) {

        console.error(error);
    }

}

.

Game.js

export class Game {


}

Now this works without using import GotGames from './model/Game';, but with it gets the following error :

Uncaught SyntaxError: Cannot use import statement outside a module

I have seen a similar problem in this space by adding type="module" in the script tag in HTML, but that gives the following error :

Access to script at 'my_file_path' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Why has adding type="module" affected my API calls and how can this be done? Has this got something to do with requiring Node.js to install webpacks by any chance?

Answer 1

Yours is actually a very broad question, but I will try to clarify some important aspects of it.

-Spoiler Starts-

Webpack.

-Spoiler Ends-

Take into account that even if it is famous for not being beginner-friendly, some refer to it, together with Babel and React, as the bleeding edge of web development technologies. So it is worth to be studied at least once. In a few words, it will transform your ES modules to a custom system (which is written in plain old JavaScript) that will be compatible with technically all browsers and will preserve functionality along with many other advantages.

However, for simplicity, you may want to use a framework like React which uses Webpack under the hood, so you won't have to directly deal with it.

I really recommend you this Medium article to discover some interesting facts about the history of modules in JavaScript and NodeJS.

At the end, we will both agree that ES6 modules are the future, but then, even after resolving your specific issue, you will sadly find that ES6 modules are a very recent standard and that it currently has relatively poor browsers support.

Answering your question:

Browsers do not interpret JavasScript files as modules by default, so that is the reason why you have to explicitly declare them using type="module" attribute in your script tags. That is obviously why you got your first error.

To correctly import "Game.js" module, you have to re-write your import statement as follows: import {Game} from './model/Game'; because you made a named export. As written in comments, do some reading about import/export on MDN and it will be clearer for you.

Finally, CORS errors are likely to be caused by a server misconfiguration. Especially with headers. You may want to try setting Access-Control-Allow-Origin header to * or your specific server name, so new requests will have Origin header different than null.

I hope this will indicate you a good path to expand your knowledge.

* EDIT: To solve the issue from the comments about the error when click opening the file I would suggest to use the following not so known meta tag <meta http-equiv="Access-Control-Allow-Origin" content="*"> to emulate the http header when there is no server. I'm not sure if it will work, but technically it should, please let me know in the comments because I'm curious.

See this

Answer 2

It seems by adding default in export default class Game with type="module" included in the script, it seems to be working fine again.

Is there an explanation as to why this works ? so that I can understand this.

EDIT : It seems that this only works when the html file is run in LiveServer (VS Code ext which acts as a local server) Whereas when I manually run (click open index.html) file the same error :

Access to script at 'file:///*path_to_.js_file*' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.