Rails 6 Webpacker calling javascript function from Rails view

Webpack does not make modules available to the global scope by default. That said, there are a few ways for you to pass information from Ruby to JavaScript outside of an AJAX request:

1. window.greet = function() { ... } and calling the function from the view as you have suggested is an option. I don't like have to code side effects in a lot of places so it's my least favorite.

2. You could look at using expose-loader. This would mean customizing your webpack config to "expose" selected functions from selected modules to the global scope. It could work well for a handful of cases but would get tedious for many use cases.

3. Export selected functions from your entrypoint(s) and configure webpack to package your bundle as a library. This is my favorite approach if you prefer to call global functions from the view. I've written about this approach specifically for Webpacker on my blog.

   // app/javascript/packs/application.js
   
   export * from '../myGlobalFunctions'
   
   
   // config/webpack/environment.js
   
   environment.config.merge({
     output: {
       // Makes exports from entry packs available to global scope, e.g.
       // Packs.application.myFunction
       library: ['Packs', '[name]'],
       libraryTarget: 'var'
     },
   })
   

   // app/views/welcome/index.html.haml
   
   :javascript
     Packs.application.greet("#{name}")
   

4. Take a different approach altogether and attach Ruby variables to a global object in your controller, such as with the gon gem. Assuming you setup the gem per the instructions, the gon object would be available both as Ruby object which you can mutate server-side and in your JavaScript code as a global variable to read from. You might need to come up with some other way to selectively call the greet function, such as with a DOM query for a particular selector that's only rendered on the given page or for a given url.

   # welcome_controller.rb
   
   def index
     gon.name = 'My name'
   end
   

   // app/javascript/someInitializer.js
   
   window.addEventListener('DOMContentLoaded', function() {
     if (window.location.match(/posts/)) {
       greet(window.gon.name)
     }
   })
   

@rossta Thanks a lot for your elaborate answer. It definitely should be hihghly helpful to the viewers of this post.

Your 1st suggestion I found while searching for solution to my problem and I did referenced it in my question. Like you I also don't like it because it is sort of a workaround.

Your 2nd and 3rd suggestions, honestly speaking went top of my head perhaps because I am novice to the concepts of Webpack.

Your 4th approach sounds more practical to me and as a matter of fact, after posting my question yesterday, along similar lines I tried out something and which did worked. I am sharing the solution below for reference

app/javascript/custom/hello.js

  function greet(name) {
    console.log("Hello, " + name)
  }

  export { greet }

app/javascript/packs/application.js

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

Note that in above file I removed require("jquery"). That's because it has already been made globally available in /config/webpack/environment.js through ProvidePlugin (please refer the code in my question). Thus requiring them in this file is not needed. I found this out while going through "Option 4: Adding Javascript to environment.js" in http://blog.blackninjadojo.com/ruby/rails/2019/03/01/webpack-webpacker-and-modules-oh-my-how-to-add-javascript-to-ruby-on-rails.html

app/views/welcome/index.html.haml

  - first_name = 'Jignesh'
  - last_name = 'Gohel'

  = hidden_field_tag('name', nil, "data": { firstName: first_name, lastName: last_name }.to_json)

Note: The idea for "data" attribute got from https://github.com/rails/webpacker/blob/master/docs/props.md

app/javascript/custom/welcome_page.js

  import { greet } from './hello'

  function nameField() {
    return $('#name')
  }

  function greetUser() {
    var nameData = nameField().attr('data')

    //console.log(nameData)
    //console.log(typeof(nameData))

    var nameJson = $.parseJSON(nameData)

    var name = nameJson.firstName + nameJson.lastName

    greet(name)
  }

  export { greetUser }

app/javascript/packs/welcome.js

  import { greetUser } from '../custom/welcome_page'

  greetUser()

Note: The idea for a separate pack I found while going through https://blog.capsens.eu/how-to-write-javascript-in-rails-6-webpacker-yarn-and-sprockets-cdf990387463 under section "Do not try to use Webpack as you would use Sprockets!" (quoting the paragraph for quick view)

So how would you make a button trigger a JS action? From a pack, you add a behavior to an HTML element. You can do that using vanilla JS, JQuery, StimulusJS, you name it.

Also the information in https://prathamesh.tech/2019/09/24/mastering-packs-in-webpacker/ helped in guiding me to solve my problem.

Then updated app/views/welcome/index.html.haml by adding following at the bottom

= javascript_pack_tag("welcome")

Finally reloaded the page and the webpacker compiled all the packs and I could see the greeting in console with the name in the view.

I hope this helps someone having a similar need like mine.