Export function in webpack bundle

Question

I am using the google Maps API which requires a callback. How do I export a callback from a webpack bundle to use by an external script such as Google Maps API?

HTML (X-d out key):

<div id="hello"></div>
<script src="/js/map.bundle.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXX&callback=initMap"></script>

map.js:

var $ = require("jquery");
function initMap() {
    $("#hello").text("hello world");
}

I build the above map.js file into a webpack bundle called map.bundle.js.

Browser console error:

Yc message : "initMap is not a function" name : "InvalidValueError" stack : "Error↵ at new Yc (https://maps.googleapis.com/ma...

I also tried adding

module.exports = { initMap: initMap }

to map.js but that didn't help.

EDIT: Same question, but for using javascript functions from webpack bundles in form events:

HTML:

<form onsubmit="sayHello(event)">
    <button type="submit">Say Hello</button>
</form>

JS:

function sayHello(e) {
    e.preventDefault();
    console.log("hello");
    return false;
}

When the JS is packaged into a bundle, the "hello" is no longer printed on the console

Answer 1

Your webpack file (map.bundle.js) does not generally write any of your functions or variables into the global (in this case, window) namespace.

This causes problems for libraries that need to be on the global namespace like jQuery or the google maps api.

One way to get around this is to add initMap to the window object

var $ = require("jquery");
function initMap() {
    $("#hello").text("hello world");
}
window.initMap = initMap;