Access app.js function in adonisjs edge template - frontend

Question

Can somebody explain to me how you access a function in the .edge template from the app.js file?
In resources/js/app.js I have
function myFunc() {
console.log("works???")
}
In the edge template I have
Some click
And I get the error
VM6192 :19 Uncaught ReferenceError: myFunc is not defined
at HTMLAnchorElement.onclick (VM6192 :19)
Note that I have the
<!-- Renders scripts -->
#entryPointScripts('app')
And the function is in the http://localhost:8080/assets/app.js path
I did manage to do something like window.myFunc = myFunc, inside app.js, but I need to call some async functions and I want the already compiled functions by webpack.

Answer 1

It seems that you do either:
map your function to window, in the app.js file (window.myFunc = myFunc), or
add an eventListener to the button you want
document.getElementById('my-btn').addEventListener('click', myFunc);
In order to make es6 work, with features like async/await, you need to add babel;
install the babel polyfill: https://babeljs.io/docs/en/babel-polyfill#installation
install core-js: https://github.com/zloirock/core-js#installation
create a .babelrc file with this configuration
{
"presets": [
[
"#babel/env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
"useBuiltIns": "usage",
"corejs": "3.16"
}
]
]
}
run node ace serve --watch again