How to use javascript module on an HTML page in a second inline script

Question

I have a JavaScript module mymmodule.js exporting a list:

export var mylist = ['Hallo', 'duda'];

Normally this module is used in other modules and this works fine. But additionally I want to use the export(s) of the module as-is in an inline script on an HTML page. I tried to copy the exports to the window object:

<html>
<head>
    <script type="module">import * as mm from './mymodule.js';  window.mm = mm;</script>
</head>

<h1>MyMain</h1>
<p>
    <div id = "info">...</div>
</p>

<script type="text/javascript">
    document.getElementById('info').textContent = window.mm.mylist;
</script>            
</html>

but I get the error "window.mm is undefined" in the console. I tried referencing mm.mylist instead of window.mm.mylist with no better result.

How can I reference the exports of a module in a second inline script on the HTML page?

halloleo · Accepted Answer · 2020-08-05 05:27:10Z

The problem is that modules are execute at the same stage as pscripts with the defer attribute](https://javascript.info/script-async-defer#defer), i.e. after reading the page and executing JavaScript in script tags.

Therefore, when the browser sees

document.getElementById('info').textContent = mm.mylist

the mymodule.js script hasn't been executed and the mm object is not available yet.

To mitigate this you need to run code referencing exports from mymodule after the DOM is completely loaded, e.g. in the onload event:

<html>
<head>
    <script type="module">import * as mm from './mymodule.js';  window.mm = mm;</script>
</head>

<h1>MyMain</h1>
<p>
    <div id = "info">...</div>
</p>

<script type="text/javascript">
    window.onload = function() {
        document.getElementById('info').textContent =    mm.mylist;
    }
</script>            
</html>

Collectives™ on Stack Overflow

How to use javascript module on an HTML page in a second inline script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related