Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

javascript - Localhost not loading module

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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:

  1. at module scope (script m1): you can use new MyClass(),
    and can "globalize" instances (e.g. xRef) or the costructor's class (MyClassRef).

  2. 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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...