I am converting old javascript code to es6 modeules and am finding many issues because my old technique was to dynamically generate a lot of HTML tags which included hard-coded event handlers in the tags like this:

const html = '<input type="text" onclick="doThisOnClick();"/>';
getElementFromID('hostId').innerHTML = html;

Those handlers are in es6 modules and get cut out because there is no direct use of them in any scripts at load time nor are they called by other module code. The only way to fix this I have found is to redesign my code to use dynamic event handler injection after generating the HTML tags. This must be done asynchronouosly via a setTimeout() call. I have been trying to discover other ways to make es6 modules accessible to potentially generated HTML code. Here is a specific issue I am having:

<script type="module">
  import { deepFunctionUsedByPotentialEventHandler } from './bar.js';
</script>

The website is being hosted by nodejs:dev-server locally. I get this error from chrome:

htmlFile.html:17 Uncaught SyntaxError: 
The requested module './bar.js' does not provide an export named 
'deepFunctionUsedByPotentialEventHandler ' (at htmlFile.html:17:10)

But the function is clearly exported in bar.js and is defined in bar.js:

bar.js...
function deepFunctionUsedByPotentialEventHandler() {
  ...
}

export { deepFunctionUsedByPotentialEventHandler, foo, bar };

I suspect that bacause there is no path to deepFunctionUsedByPotentialEventHandler at load time that the code has been stripped from the module for faster loading. This is NOT using webpack or any other building type tool.

I would prefer to keep the global scope clean by not using window.deepFunctionUsedByPotentialEventHandler.

Seems to me that the ES6 spec should have a way to force keeping code available like:

export { foo keep, bar, bob }

I have tried a host of ideas but so far I have not found a quick-easy way to convert this code.