ES6 Modules: Undefined onclick function after import

javascript ecmascript-6 es6-modules
Konrad Höffner picture Konrad Höffner · Jun 16, 2017 · Viewed 15.7k times · Source

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.

Answer

Yury Tarabanko picture Yury Tarabanko · Jun 16, 2017

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>

Related questions

Is it possible to import modules from all files in a directory, using a wildcard?

With ES6, I can import several exports from a file like this: import {ThingA, ThingB, ThingC} from 'lib/things'; However, I like the organization of having one module per file. I end up with imports like this: import ThingA from …

Read More
How can I alias a default import in JavaScript?

Using ES6 modules, I know I can alias a named import: import { foo as bar } from 'my-module'; And I know I can import a default import: import defaultMember from 'my-module'; I'd like to alias a default import and I had …

Read More
`export const` vs. `export default` in ES6

I am trying to determine if there is any big differences between these two, other than being able to import with export default by just doing: import myItem from 'myItem'; And using export const I can do: import { myItem } from …

Read More