0

I read a lot about module and thought that i really understand it. But later i had a simple example with two java script files: 1.js file:

import './2.js';
console.log('importing');

2.js:

console.log('exporting module');
const a = 10
export const b = [];

and it the html file it was declared:

<defer src="1.js">

Then when running the code i got the following Error:

uncaught syntax Error: Cannot use import statement outside of a module

Now i'm trying to understand, if i added a type="module" to the above brackets, is it the thing which make the 1.js to be a module?!? If the answer is yes, so what make 2.js a module and not just a script?

In addition does importing this way:

import './2.js'

will import the const b from 2.js or not? i know that it will print to console but i can't understand if const b will be imported or not and from an unclear reason when running the code in my browser i'm getting two erros: 1.Access to script at 'file:///C:/Users/Dor/Desktop/17-Modern-JS-Modules-Tooling/starter/script.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.

2.GET file:///C:/Users/Dor/Desktop/17-Modern-JS-Modules-Tooling/starter/script.js net::ERR_FAILED

DorVak
  • 297
  • 2
  • 9

3 Answers3

1

The differences between modules and scripts mostly come down to how it is loaded.

If you load something as a module then the rules for modules (in particular those of scope) apply to it, and it you can import and export inside it.

Using type="module" loads a resource as a module. Using import loads a resource as a module.

Your second problem is a duplicate of javascript modules and CORS

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • such a nice answer!! Without telling million of un relevant things like many users like to do :) I install a server and now getting: `Failed to load resource: the server responded with a status of 404 (Not Found)` – DorVak Jan 05 '21 at 14:40
  • @DorVak — Then the URL to your module is wrong. – Quentin Jan 05 '21 at 14:41
  • Yes i have fix it :) thanks.. And realize that **const b** isn't recognize.. So only top level statement are imported if we are using import './2.js'; – DorVak Jan 05 '21 at 14:43
  • Only the things you import are imported. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import – Quentin Jan 05 '21 at 14:44
  • But if i'm importing without specifying a name.. For example: `import ./2.js` and `2.js` has code that isn't inside a function.. For example a `console.log('something')`, so it will print it.. In the link you have sent me, i didn't find a reference for this situation.. I'm not sure what is being imported in this situation.. Does the console printing is considered to be `imported`? – DorVak Jan 05 '21 at 14:52
  • 1
    The code in the module will still run. If you want to access a value outside that module then you need to export and import it. – Quentin Jan 05 '21 at 14:53
0

A JavaScript module encapsulates code into a useful unit that exports its capability/value. This makes it easier to see the broader scope, easier to find what you’re looking for and keeps related code close together. A normal web page usually loads JavaScript files via HTML script tags. That’s fine for small websites, but when developing large scale web applications, a more robust organization and the loader is needed. A module loader lets an application load dependencies easily by specifying a string that identifies the JavaScript module’s name.

Modules can load each other and use special directives export and import to interchange functionality, call functions of one module from another one:

  • export keyword labels variables and functions that should be accessible from outside the current module.
  • import allows the import of functionality from other modules.

The vbery first step to use a module is to create one, which is done with the help of the export keyword. We export all the variables and functions in the module so they are available for use in other files.

Example-

//export this file
export function hi(shyam) {
  return `Hello, ${shyam}!`;
}

The next step is to use the module in our program by the import statement. We import the module in the document and use its variables and functions, without having to redefine them.

Example-

<script type="module">
    //import the JavaScript module from the file
       import {hi} from './hi.js';
      //use the hi() function, defined in the module
     document.body.innerHTML = hi('Keshav');
   </script>
Keshav
  • 1
  • 1
-1

Javascirpt Modules work only via HTTP(s), not in local files

Gaurav Patil
  • 1,162
  • 10
  • 20