Symfony 4 Javascript function not defined

Question

I have created a app.js (and app.scss) to use with Symfony Encore.

└───assets
    ├───css
    │   └───app.scss
    └───js
        └───app.js

app.js:

/**
 * Name: app.js
 * Desc: Main application javascript
 */

var $ = require('jquery');
require('bootstrap-sass');
require('../css/app.scss');

// Initialize tooltips
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
});

var openLoginModal = function(element){
    $('#login-modal').modal('show');
}

In one of my templates, I want to be able to set the 'onclick' event to call the 'openLoginModal' function defined in app.js

<a class="btn btn-info navbar-btn navbar-right" data-toggle="login-modal" onclick="openLoginModal(this)">Login</a>

When the anchor element is clicked the following error is displayed in the console:

Uncaught ReferenceError: openLoginModal is not defined
    at HTMLAnchorElement.onclick ((index):29)

I assume that I cannot access the functions from app.js for some reason, but I don't know enough about webpack to understand why this is

Answer 1

try this

(function ($, window)
{
   window.openLoginModal = function(element){
       $('#login-modal').modal('show');
   }
}(jQuery, window);