Localhost not loading module

Question

I am using modern Javascript MyClass.js

export default class MyClass {
  constructor(x) {
    this.val=x? x: "Hello!"
    console.log("MyClass:",x)
  }
}

at my http://localhost/myfolder/mypage.htm, with the source below,

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='shortcut icon' type='image/x-icon' href='./favicon.ico' />
    <script type="module" src="./MyClass.js"></script>

    <script>
    'use strict';

    document.addEventListener('DOMContentLoaded', function(){

    alert(123)
    let x = new MyClass(11);

    }, false); //ONLOAD
    </script>

</head>
<body> <p>Hello1!</p> </body>
</html>

Why console say "Uncaught ReferenceError: MyClass is not defined"?

PS: this question is a complement for this other about using ES6+ with browser+NodeJs.

NOTE: using UBUNTU ith Apache's Localhost... Some problem with myfolder a symbolic link to real folder? at /var/www/html I used ln -s /home/user/myRealFolder/site myfolder

Thanks @MaheerAli, seems the solution... What the syntax for `import MyClass`? No way to say it at HTML tag? — Peter Krauss, Mar 05 '19 at 15:43

score 2 · Accepted Answer · edited Mar 06 '19 at 16:18

you need to import the module before using it

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8" />
    <script type="module" src="./MyClass.js"></script>
    <script type="module" id="m1">
      // script module is an "island", not need onload.
      'use strict';
      import MyClass from './MyClass.js';
      let x = new MyClass(11);     // we can use here...
      console.log("debug m1:", x)  // working fine!

      window.MyClassRef = MyClass; // "globalizing" class
      window.xRef = x              // "globalizing" instance
    </script>
    <script> // NON-module global script
    document.addEventListener('DOMContentLoaded',function(){
       // only works after all modules loaded:
       console.log("debug:", window.xRef) // working fine!
       let x = new window.MyClassRef(22); // using class also here,
       console.log("debug:", x)           // working fine!

    }, false); //ONLOAD
    </script>

</head>
<body> <p>Hello1!</p> </body>
</html>

There are two ways to use an imported class:

at module scope (script m1): you can use new MyClass(),
and can "globalize" instances (e.g. xRef) or the costructor's class (MyClassRef).
at global scope: to work together other libraries or with main script, use a global reference, e.g. new window.MyClassRef().

All this solution relies upon "static import"...

Optional dynamic import

You can use also import with ordinary default <script> (no type="module"), and no "onload", using this solution, instead the last script:

    <script>
    'use strict';
    import('./MyClass.js').then(({default: MyClass}) => {
       alert(123)  // async block
       let x = new MyClass(11);
     });
    </script>

See dynamic import.

... An exotic alternative to avoid redundances is to use the *dynamic import* syntax [`import('./MyClass.js').then((MyClass) => { let x = new MyClass(11) })`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) — Peter Krauss, Mar 05 '19 at 16:18

Localhost not loading module

1 Answers1

Optional dynamic import

Linked