How to execute custom javascript functions in Rails 6

Question

With the arrival of Webpacker to Ruby On Rails, I can't find a way to use my JavaScript functions.

I have a file called app-globals.js with a function to test:

function alerts() {
  alert("TEST")
}

Then I want to use it in one of my views:

<% = button_tag 'Button', type: 'button', onClick: 'alerts ()'%>

But when I press the button, this error is shown in the browser console:

ReferenceError: alerts is not defined

1. I placed the app-globals.js file in "app/javascript" and in "app/ javascript/packs/application.js" I placed require ("app-globals").

2. I moved app-globals.js to "app/javascript/packs" and removed the require ("app-globals") from application.js.

With either case, an error still appears.

Answer 1

There is a workaround, though. You can:

change the function signatures from:

function myFunction() { ... }

to:

window.myFunction = function() { ... }

So in your code we can do like below :-

app/javascript/packs/app-globals.js

window.alerts = function() {
    alert ("TEST");
}

and then require this file to application.js :-

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()

require("@rails/activestorage").start()
require("channels")
require("jquery")

import $ from 'jquery'
window.jQuery = $;
window.$ = $;


require("packs/app-globals") ## require your file