66

I am testing ES6 Modules and want to let the user access some imported functions using onclick:

test.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Module Test</title>
</head>
<body>
    <input type="button" value="click me" onclick="hello();"/>
    <script type="module">import {hello} from "./test.js";</script>
</body>
</html>

test.js:

export function hello() {console.log("hello");}

When I click the button, the developer console says: ReferenceError: hello is not defined. How can I import functions from modules so that they are available as onclick functions?

I am using Firefox 54.0 with dom.moduleScripts.enabled set to true.

Konrad Höffner
  • 9,647
  • 15
  • 55
  • 104
  • Can you open the console and execute hello manually after the page has loaded? – Gavin Jun 16 '17 at 13:26
  • This feature is marked as experimental, I would not use it right now. You'd better transpile (Babel?) your code to be sure it will work in any browser, don't you? – sjahan Jun 16 '17 at 13:40

3 Answers3

110

Module creates a scope to avoid name collisions.

Either expose your function to window object

import {hello} from './test.js'

window.hello = hello

Or use addEventListener to bind handler. Demo

<button type="button" id="hello">Click Me</button>
<script type="module">
  import {hello} from './test.js'

  document.querySelector('#hello').addEventListener('click', hello)
</script>
Yury Tarabanko
  • 42,049
  • 9
  • 81
  • 96
  • 9
    Definitely take option two. Globals are a pain to deal with at the best of times. – Quentin Mar 02 '20 at 16:09
  • Tempted to edit this answer and remove the `window` approach entirely or _at least_ add a warning. Apart from the reason above, this will still leave an `onclick` attribute there. These are [bad practice](/q/11737873/4642212), an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. The last browser needing these reached EOL nearly two decades ago, so this approach has nothing to do with modern programming. _Always_ use [`addEventListener`](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these). – Sebastian Simon Mar 18 '22 at 20:52
26

Module scope in ES6 modules:

When you import a script in the following manner using type="module":

<script type="module">import {hello} from "./test.js";</script>

You are creating a certain scope called module scope. Here is where modules scope is relative to other levels of scope. Starting from global they are:

  1. Global scope: All declarations outside a module on the outermost level (i.e. not in a function, and for const and let not in a block) are accessible from everywhere in the Javascript runtime environment
  2. Module scope: All declarations inside a module are scoped to the module. When other javascipt tries to access these declarations it will throw a reference error.
  3. Function scope: All the variables declared inside (the top level of) a function body are function scoped
  4. Block scope: let and const variables are block scoped

You were getting the referenceError because the hello() function was declared in the module, which was module scoped. As we saw earlier declarations inside module scope are only available within that module, and you tried to use it ouside the module.

We can make declarations inside a module global when we explicitly put it on the window object so we can use it outside of the module. For example:

window.hello = hello;  // putting the hello function as a property on the window object
Willem van der Veen
  • 27,075
  • 15
  • 160
  • 135
  • Oh so does that mean that a function in a script tag without the module type is put on the global scope and can be used from within an external script? – Konrad Höffner Jan 11 '22 at 08:16
2

While the accepted answer is correct, it scales poorly once you start importing from multiple modules, or declaring multiple functions . Plus, as noted by @Quentin, it risks global name space pollution.

I prefer a slight modification

import { doThis, doThat } from './doStuff.js'
import { foo1, foo2 } from './foo.js'

function yetAnotherFunction() { ... }

window._allTheFns = { doThis, doThat, foo1, foo2, yetAnotherFunction }

// or, if you prefer, can subdivide

window._doStuffjs = { doThis, doThat }
window._foojs = { foo1, foo2 }
  1. Uses an "unusual" property name to (hopefully) avoid global namespace issues
  2. No need to immediately attach (or forget to attach) an EventListener.
  3. You can even put the listener in the HTML, e.g. <button onclick="window._foojs.foo1(this)">Click Me</button>
user949300
  • 15,154
  • 6
  • 33
  • 65