1

I've been trying to fix this one issue I ran into but have no idea why my code is wrong. I have this module I made using javascript for NPM. I just converted that npm to HTML syntax and imported that module into this HTML file.

But when I try to access the items using "window.np"(window is how I save those files into the user's computer), it says "window.np" is undefined. I have no idea why it says this because when I just do console.log(window), I can see 'np' as one of the attributes. But I am still unable to access it.

This is the output when I do "console.log(window)".

enter image description here

This is the expanded version of the picture above.

enter image description here

<!DOCTYPE html>
<html>
    <body>
        <script type="module" src="https://unpkg.com/numpy-matrix-js@1.1.0/src/html/index.js">
        </script>

        <script>
            console.log(window)
            console.log(window.np)
        </script>
    </body>
</html>
SuperStormer
  • 4,997
  • 5
  • 25
  • 35
SatvikVejendla
  • 424
  • 5
  • 14
  • Does this answer your question? [ES6 module scope](https://stackoverflow.com/questions/30287977/es6-module-scope). As for why `np` displays in the first console.log, I have no idea. – SuperStormer Mar 18 '21 at 22:56
  • Could be...I'm looking into it. I suspected it was something like this because it works when I import it locally (copy files and import into the BODY) but doesn't work when using static imports and in the HEAD. – SatvikVejendla Mar 18 '21 at 22:57
  • Hmmm, the library does `window.np["..."] = ...`, looks like my theory was wrong. – SuperStormer Mar 18 '21 at 22:59
  • Yes. For all the functions, I do "window.np[**name**] = **function**" to initialize all the functions to "window.np". In the preview of the second image I attached, it shows all the functions are there too. I just can't access them. – SatvikVejendla Mar 18 '21 at 23:03

1 Answers1

1

Scripts included as an ES6 module via type="module" are actually deferred by default (MDN), meaning that the numpy-matrix-js script will run after the inline script.

The fix for this is simple: you need to defer the inline script's execution to after the module's. One way is the defer attribute, but since that only works on external scripts, you'll need to put it in a separate file. The other method would be to listen for DOMContentLoaded:

<!DOCTYPE html>
<html>
    <body>
        <script defer type="module" src="https://unpkg.com/numpy-matrix-js@1.1.0/src/html/index.js">
        </script>

        <script>
            window.addEventListener("DOMContentLoaded",function(){
                console.log(window)
                console.log(window.np)
            });
        </script>
    </body>
</html>

See How to defer inline Javascript? for more info.

As for why it displays in the console, I'm guessing that the fancy object browser looks up the properties when you click on it (ie. after the module has ran), not when its logged.

SuperStormer
  • 4,997
  • 5
  • 25
  • 35
  • Thanks. It works even without the "defer", it just needs the "window.addEventListener". But is there any other way to get this without the listener. I know that most modern HTML modules don't do this and was wondering how I could change mine to mimick their structure. – SatvikVejendla Mar 19 '21 at 12:08