The type="module" in html file, what's for?

[zak]

i’d like to know how the type=“module” in html’s script tag is needed? How to benefit from it? In case i encounter it.
Use an example or provide a link if you can ?
Thank you.
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/create-a-module-script

[bbsmooth]

You have to use <script type="module"> to include a JS module in your page. Modules are treated differently than regular JS script files by the browser and thus you need to tell the browser that the file you are including is a module and not a regular JS script file. I’m not sure if this answers your question. You’ll need to be more specific if it doesn’t.

[anon22924398]

Say someone (could be us) writes 2 scripts:

• areas.js, with functions like const square = side=>side*side
• and perimeters.js (similar stuff)
  We now want to use those to calculate this weird number:

const theSum=areas.square(size)+perimeters.square(size)

So first, we could do this index.js:

const areas = require('./areas.js'); // Or "import areas from './areas.js'";
const perimeters = require('./perimeters.js');  or "import areas from './areas.js'";

We can’t send that to the browser and expect to work. require) won’t be does not exist in the browser (only in NodeJS); import complicates the scope of variables (I believe).

But we can import modules from the browser, in the script tags. And in this way you would not need to bundle/merge those files, I believe you do it this way:

<script type='module'>
import areas from './areas.js';
import perimeters from './perimeters.js';
const theSum=areas.square(size)+perimeters.square(size)
console.log(theSum)
</script>

I believe more than how you achieve this, remember to write modularised code, where each script does one type of thing (like calc of areas), and either bundle/browserify the files or import them in the browser.

[lasjorg]

I would also suggest you check out the MDN docs on modules.

JavaScript modules - JavaScript | MDN

[zak]

In the example given in the curriculum challenge they provided a src= “filename.js” with the script tag like this :

<script type="module" src="filename.js">

Is that src attribute i.e filename.js in this example represent the module we gonna use in our script? Or import from? If not then why do we write it?
Thank you.

[anon22924398]

That script tag imports everything that was exported in filename.js. Any variable that was not exported in filename.js won’t be available.

[zak]

as you can see in the image below, i found a website that says the file that should go in the src of the script tag is not the file we exporting from but the file we are importing into:

you see what i mean , because i use VSCODE and the html i created that import an exported function in a js file , does not work when i open it in chrome, and empty page appears.

[anon22924398]

I see… Did you create a live server in vscode? Otherwise the files will never be loaded.

[zak]

first time I hear about a live server in vscode, no.
you should know that I tried document.getElementById… a string on the page and I can see results on the chrome, it works fine until I put type=‘module’ in a script tag and try to call an exported function than the page goes blank when reloaded.
is it the Microsoft version or the browser version or what is causing this? because almost all famous websites and all the google searches show the same way to do it.

[bbsmooth]

JS Modules can only be loaded from a web server, so if you are merely opening the HTML file in your browser directly from your filesystem then the module file won’t load. The Live Server VSCode extension provides a web server for you so that you can run your HTML page through it and thus be able to load a module.

[zak]

So how to do that? Just trust the google search?
You mentioned extension, should i just go to extension search of vscode and install one?
Any advice on how it works once installed?
Thank you.

[bbsmooth]

I would start at the Live Server web page.

[zak]

i insteled it, opened my html file with live server I got a page opened with this address: listing directory /

I have to mention that when I clicked on go live, they provided to choose a folder up in the search bar I have chosed a different directory from 5he one project is in , so probably that’s why page is loaded like that, I don’t know how to change the directory the sever goes live from.

[zak]

That’s it, it found out the problem, it’s a mistake i made by importing both on a second js file and on html script.
I commented the import statement on the js file, the live servered page was giving results. Thank you.