Custom Javascript functions imported in Rails 6

Question

I have seen quite a few posts about it and I tried several solutions to no avail. I am literally pulling my hair over this one.

Quick introduction: In the application I am working on, Users get to choose a date when processing multiple things. The application, needs to be able to check that date and make sure the date does not fall on a week-end or holiday. This happens in several screens. So in order to be a good little programmer, I don't want to code that check_holiday_or_weekend function in every javascript file where I need it. I would like to be able to code this once in a js file somewhere and be able to reference it in several other js files when needed.

With Rails 4, that function was sitting right at the end of application.js and was available everywhere.

However, with Rails 6.1 and Webpack, I have not been able to use that function.

Here is what I tried so far.

Add the function at the end of application.js just like I did it in Rails 4. When I do that, I am getting a ReferenceError that the function does not exist or has not been declared.

After reading on the subject, I found out that Webpack was pretty strict on scopes and that you had to write the functions into a separate js file and then import that js file or even use the <%=javascript_pack_tag %> in the view to import that file only on that view. I tried that as well to no avail.

Finally I saw a few solutions implementing something that looks more out of the realm of ES6 and React where it's suggested to write your function into a js file and to export the function. Then, import that function in the js file where you need to use it. So this is where I am at and it is still not working.

So right now, my application.js remains unchanged I have created the file globals.js with the following function (this is just a quick test function to see if it's working)

globals.js

export const potato = () => {
  alert("Potato!!);
}

Then in the js file used on that particular screen screen_specific.js

import { potato } from 'globals';

$(document).on("screen_specific#new:loaded screen_specific#create:loaded", function() {
potato();
}

When the specific screen opens, Nothing happens and in the console I get

Uncaught TypeError: Object(...) is not a function

I also tried to change the named export to the default export but I am getting the same error albeit with a different message

globals.js with a default export

const potato = () => {
  alert("Potato!!);
};
export default potato;

screen_specific.js with default import

import potato from 'globals';

$(document).on("screen_specific#new:loaded screen_specific#create:loaded", function() {
potato();
}

Uncaught TypeError: globals__WEBPACK_IMPORTED_MODULE_0___default() is not a function

So from here, I have absolutely no idea which direction to go, other than coding the function in every js file where I need it. Which is really really bad coding.

Note: I have tried to write the functions different ways too such as

const potato = function(){
...};

or 

var potato = function() {
...
};

Any insight or suggestion will be appreciated.

Answer 1

I just "solved" this problem for myself. Be aware that this is a solution that is non-optimal: it basically roots your code in the past and increases technical debt. However, here's what I learned.

With webpacker, the paradigm is that JavaScript isn't "loose." It's attached to elements, and there is little or no concept of a global function.

However, in Rails 6.1, you can still use the old asset pipeline for JavaScript sprinkles: those little bits you need in several places but want to keep DRY.

So, add a javascript directory to app/assets . Then open app/assets/manifest.js and append //= link_directory../javascript.js .

Then, in your layout you can add a javascript_include_tag for the appropriate js file. It will load it the old fashioned way, and those functions should be available in that page.

Obviously, the old asset pipeline is something you (and I) should be moving away from. But this might give you some breathing room until you do.