Integrating into Rails with Webpacker

mixing into Rails server-rendered views with Webpacker

Hey there,

This article is about an opinionated way to integrate into a Rails 6 project with Webpacker for server-rendered views. I hope this article and code bits can help people with similar use cases in setting thing up.


Back then on Ruby on Rails, we could just place every js files in the /assets directory and Sprockets will compile everything in it. Then, all methods and symbols will be readily available on the global scope to be used on Rails server-rendered views.

When I started a new Rails project at work, I discovered that we can use Webpacker to compile our js files and leverage the abundance of packages from npm . Also, I quickly found out that Webpacker does not expose all methods and classes included in all js files globally, while trying to debug it for hours. 😂

From my crude understanding of how Webpacker works, as js files are compiled into individual modules, so do the methods and classes defined are packaged into its very own scope. It means that things do not get leaked into other modules unless being required or imported. The same applies to global scope.

I found ways to import jQuery at the global scope via a global import but the same approach does not work to expose at the global scope of $.

How I want this to work

  1. jQuery and compiled and initialised at application.js level for ease of maintainance.
  2. jQuery and initialised instance must exists at global scope for server-rendered views.


Installing Dependencies

  1. Get the necessities

    yarn add jquery

    Please refer to to know which relevant release to get for your preferred stying framework.

  2. Get webpack loaders

    yarn add -D css-loader expose-loader imports-loader
  3. Add the following js files that defined the packages we want to load.

    1. jQuery loader, save at config/webpack/loaders/jquery.js

      // expose-loader helps us to expose the jquery module as $ and jQuery at
      // the global object, allowing us to access it at Rails server-rendered
      // views.
      module.exports = {
          test: require.resolve("jquery"),
          loader: "expose-loader",
          options: {
              exposes: ["$", "jQuery"],
    2. loader, save at config/webpacker/loaders/datatables.js

      // relies on the jquery global variable to work.
      // import-loader helps us to add the necessary require('jquery') so the
      // jquery variable is available when any packages are loaded.
      // refer to
      module.exports = {
          test: /datatables\.net.*/,
          loader: "imports-loader",
          options: {
              // Disables AMD plugin as
              // checks for AMD before CommonJS.
              additionalCode: "var define = false;",
  4. At config/webpacker/environment.js, we will append our loaders to webpack and add a ProviderPlugin.

    const { environment } = require("@rails/webpacker");
    const webpack = require("webpack");
    // import our loaders.
    const datatables = require("./loaders/datatables");
    const jquery = require("./loaders/jquery");
    // append them to webpack loaders.
    environment.loaders.append("datatables", datatables);
    environment.loaders.append("expose", jquery);
    // ProviderPlugin helps us to load jQuery when the variables of $ and jQuery
    // are encountered as free variables at other modules.
    // Let's say if you want to use Bootstrap 4 and Popper.js.
    // Refer here
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
    module.exports = environment;
  5. At app/javascript/packs/application.js

    import dt from "";
    document.addEventListener("turbolinks:load", () => {
        dt(window, $);
  6. At whatever views you have. Let's say app/views/members/index.html.slim.

    h1 Member List
          td Member ID
          td Family Name
          td Given Name
          td Birth Day
        - @members.each do |member|
            td =
            td = member.famil_name
            td = member.given_name
            td = member.birthdate.strftime('%d %B %Y')
    / Just slap this in.
      document.addEventListener('turbolinks:load', function() {
  7. Import '' with your preferred method.

That should do the trick. Now:

  1. Our have the needed jquery variable within its scope.
  2. is initialised at application.js level.
  3. We get to access $(<query>).DataTable() at the global scope at any Rails server-rendered views.

Example project

I have setup an example projects with the workings here.

References and citations

The approach in this article is a compilation of solutions from many precursors asking and answering the same question.

I might have missed out some references here.