DEV Community

Adding Custom JavaScript in Rails 6

Felice Forby on August 21, 2019

In Rails 6, JavaScript assets are no longer included with the app/assets/ directory and instead have been moved into a separate directory app/javas...

Read full post

Aarvy • Sep 19 '19

Method 2 is horrible. I tried is personally and its hard to believe that JS files are not compiled according to the order given but with alphabetical naming of those files.

so in case your file requires jquery and has name custom.js, with following order:

require("jquery")
require("packs/custom")

It first compiles custom.js then jquery.

Victor Vincent Taglia • Dec 19 '19 • Edited

Have you found any method for including js from node_modules in order? Or is the replacement for the asset pipeline just useless in Rails 6 because we can't define the order in which js is included?

Aarvy • Dec 22 '19 • Edited

Why you have to include? Just use yarn add package_name to add js library and require or import the global variable.

Victor Vincent Taglia • Dec 22 '19

I meant require when I said include. The webpack puts the JS in the wrong order and it doesn't work when I do a regular require.

Andrew Aks • Oct 24 '19 • Edited

Thanks for the article! I try to call JavaScript 'alert' when clicking the button:

JavaScript code is placed in app/javascript/packs/custom.js and contains only this function: function dosmth() { alert(‘hello’); }
This file is referenced in app/views/layouts/application.html.erb: <%= javascript_pack_tag ‘custom’ %>
Finally, JS code is called on button click in a ERB file: <%= button_tag ‘Do smth’, type: ‘button’, :onclick => “dosmth()” %> When I run the app, I see a compiled script on a page. But when I click the button, I get the error: ReferenceError: Can’t find variable: dosmth. Could you please help if you have any ideas?

Felice Forby • Oct 24 '19 • Edited

Well, I did some digging... Since these are webpack modules, I guess you have to do a little more work to make the function available if you're simply declaring it in pack/custom.js. First, you need to export function by adding an export at the end of the file:

// javascript/packs/custom.js

function dosmth() { 
  alert('hello'); 
}

export default dosmth;

Then, in the main application.js, you have to import it and make it available to the window. You can do that by adding this to the bottom of application.js

// javascript/packs/application.js

// require statements, etc....

import dosmth from './custom'
window.dosmth = dosmth

Then it should work! I think there's a way to export and import all functions in a file too... I'm not very familiar with how webpack works yet, but I'll try to update this post with some more info soon.

Instead of exporting/importing, another way is to add the onClick function with an event listener instead. First, give your button and id or something like that and remove the onclick:

<%= button_tag 'Do smth', id: 'button-click', type: 'button' %>

Then in the custom.js file, add an event listener:

// javascript/packs/custom.js

function dosmth() { 
  alert('hello'); 
}

document.addEventListener('turbolinks:load', () => {  
  const clickButton = document.getElementById("button-click");  

  clickButton.addEventListener("click", dosmth); 
});

You do need to make sure you wrap the event listener (and other JS) inside the document.addEventListener('turbolinks:load', () => {}. That's Rails' way of making sure the page and turbolinks is loaded before any of the javascript gets executed!

I hope that helps!! I learned a bit trying to figure this out too!

John Viviano • Nov 19 '19

Thanks for this article. It was helpful. Changing the declaration of your JavaScript function may simplify things a bit:

// in your html
<a href="#" onclick="dosmth()">dosmth</a>

// javascript/packs/custom.js
window.dosmth = function() {
alert('hello');
}

// I don't think you need the export default dosmth;
// export default dosmth;

// In your javascript/packs/application.js I don't think you need the corresponding declarations:

// import dosmth from './custom'
// window.dosmth = dosmth

Andrew Aks • Oct 24 '19

Ooh, great thanks, Felice!

nico_lrx • Apr 2 '20

Thanks for the article. Any way to add coffee files? I tried require("custom/pagination") and require("custom/pagination.coffee") but I get the following error: Error: Cannot find module 'custom/pagination.coffee'`

Maysam Torabi • Aug 4 '20

try require("./custom/pagination")

nico_lrx • Apr 2 '20

Apparently Coffee scripts are not supported by Rails 6.

Damian Demasi • Nov 9 '21

Awesome post! I ended up using a variation of the method 3:

Using include_javascript_pack 'my_module' in an index.html.slim view file.

Creating a app/javascript/my_module/index.js file with the actual JS code.

Creating a app/javascript/packs/my_module.js pack that imports the JS code: import 'my_module';.

Then I ran: RAILS_ENV=development bundle exec rails webpacker:compile.

Michael Lee 🍕 • Sep 18 '19

Thanks for this article @morinoko! Just started up a Rails 6 application and couldn't figure out where to put the JavaScript files. Now I know thanks to this article.

Felice Forby • Sep 18 '19

Thanks again for reading :D Good luck with your new application!

Angelica Pinili • May 25 '20 • Edited

I am currently working on Action Singal-ing the connection for a webchat. Credits to Jean Paul Sio's work. His worked for in Rails 5 but Rails 6 is a new different ballgame. Two functions have been getting reference errors namely ()handleJoinSession and ()handleLeaveSession
**in the packs/signaling-server.js these two functions are syntaxed this way:

const handleLeaveSession = () => {
for (user in pcPeers) {
pcPeers[user].close();
}
pcPeers = {};

App.session.unsubscribe();

remoteVideoContainer.innerHTML = "";

broadcastData({
type: REMOVE_USER,
from: currentUser
});
};

const joinRoom = data => {
createPC(data.from, true);
};

const removeUser = data => {
console.log("removing user", data.from);
let video = document.getElementById(remoteVideoContainer+${data.from});
video && video.remove();
delete pcPeers[data.from];
};

While in the views section they are called through a button click

like wise with

I was able to access camera and have something pop out by simply adding
import handleJoinSession from './signaling-server' or require("packs/signaling-server") in the application.js (following your advise). I can also make the camera work just by the javascript tag in the views but still the reference error occurs. The perfect scenario would be these function be referenced so that the camera would turn on as with the handleJoinSession and off with the handleLeaveSession occurs. Anyone well versed with the javascript syntax, I would like to thank in advance. :)

Here is the exact error: (index):1 Uncaught ReferenceError: handleLeaveSession is not defined
at HTMLButtonElement.onclick (VM73 :1)

Saf11000 • Jun 26 '21 • Edited

I'm currently learning ruby on rails and this post is really helpful. Thank you so much. I have a question, where is the best place to put the js link tag?

Currently, I put it in application.html.erb
<%= javascript_include_tag "cdn.ckeditor.com/4.16.1/full/ckedi..." %>
But I think there's still a better place to put it

Thanks in advance. :)