Rails Webpacker - How to access objects defined in webpack entry file from views [HTML file]

Question

I have a Rails 6 application and using Webpacker for assets.

I have the following code in file app/javascript/packs/application.js :

export var Greeter = {
    hello: function() {
        console.log('hello');
    }
}

And I have the following script in one of my view (HTML) file:

<script>
 $(document).ready(function(){
   Greeter.hello();
 });
</script>

Note: I am using JQuery and it is working fine.

I am getting the following error:

Uncaught ReferenceError: Greeter is not defined.

How can we use libraryTarget and library to expose the bundled modules, so that it can be accessed from HTML files as well ?

Or, is there any other way of doing it using Rails Webpacker ?

Any help would be much appreciated!

Exonerate

Answer 1

To do this without directly mutating the window object in your application code, you'll want to export Greeter as a named export from your application.js pack and extend the Webpack config output to designate the library name and target var (or window will also work).

// config/webpack/environment.js

environment.config.merge({
  output: {
    library: ['Packs', '[name]'], // exports to "Packs.application" from application pack
    libraryTarget: 'var',
  }
})

// app/javascript/packs/application.js

export {
  Greeter
}

<script>
 $(document).ready(function(){
   Packs.application.Greeter.hello();
 });
</script>

The library name is arbitrary. Using the [name] placeholder is optional but allows you to export to separate modules if you're using multiple "packs".

Alderete

Answer 2

As I cannot comment rossta's answer, here is what I had to do. My default config was:

// config/webpack/environment.js

const { environment } = require('@rails/webpacker')

module.exports = environment

and I just had to add the additionnal config in it:

// config/webpack/environment.js
    
const { environment } = require('@rails/webpacker')

environment.config.merge({
  output: {
    library: ['Packs', '[name]'], // exports to "Packs.application" from application pack
    libraryTarget: 'var',
  }
})

module.exports = environment

After that, as mentioned by rossta, each symbol which is exported in app/javascript/packs/application.js can be accessed from the DOM as Packs.application.<symbol>.

Inexact

Answer 3

in app/javascript/packs/application.js:

import Greeter from '../greeter.js'
Greeter.hello()

and in app/javascript/greeter.js:

export default {
  hello : function(){
    console.log('hello')
  }
}

Threat

Thanks for the response. Actually, I want to call Greeter.hello() from one of the HTML page and not from a JS file. – Exonerate

Answer 4

I could fix the issue exposing Greeter object to window as follows:

export var Greeter = {
    hello: function() {
        console.log('hello');
    }
}

window.Greeter = Greeter;

However, I am still looking for a Webpack way of accomplishing this.

Exonerate