ES6 Modules: Undefined onclick function after import

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.

Solution

Module creates a scope to avoid name collisions.

You can use addEventListener to bind the 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>

Or you can expose your function to the window object, that is not recommended.

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