Access app.js function in adonisjs edge template

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

<a href="#" onclick="myFunc(); return false;">Some click</a>

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.

Mihai Marinescu · Accepted Answer · 2021-08-16T11:56:36.043

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

Access app.js function in adonisjs edge template

1 Answers1