I am trying to add custom JS to my Rails 7 project. I followed the instructions on this StackOverflow answer.

But I'm still not able to use custom JS in my view.

Here is my main.js:

function sayHi() {
    console.log("hi");
}

window.sayHi = sayHi;

Here is my view (index.html.erb):

<div>
  <button type="button" onclick="sayHi()">Click Me!</button>
</div>

When I click the button, in the console it just says:

Uncaught ReferenceError: sayHi is not defined

I'm really not sure how to access the custom JS from my view.

Here is a link to my project I uploaded to DropBox.

I am trying to add custom JS to my Rails 7 project. I followed the instructions on this StackOverflow answer.

But I'm still not able to use custom JS in my view.

Here is my main.js:

function sayHi() {
    console.log("hi");
}

window.sayHi = sayHi;

Here is my view (index.html.erb):

<div>
  <button type="button" onclick="sayHi()">Click Me!</button>
</div>

When I click the button, in the console it just says:

Uncaught ReferenceError: sayHi is not defined

I'm really not sure how to access the custom JS from my view.

Here is a link to my project I uploaded to DropBox.

• javascript
• ruby-on-rails
• ruby
• ruby-on-rails-7

• 2 Better solution - just stop writing JS like its 2005 and attach an event handler. You'll thank me later. – max Commented Dec 11, 2022 at 8:39

3 Answers 3

So I am going to post this as a plete answer to anyone who wants to add javascript to their Rails 7 project:

1. Create your custom JS file in app/javascript/custom/main.js (or whatever file name you like):

   function sayHi() {
       console.log("hi");
   }
   
   window.sayHi = sayHi;  // You must have this to expose your functions
   

   (or you can use an event hanlder instead)

2. Go to config/importmap.rb and add the following:

   pin_all_from "app/javascript/custom", under: "custom"
   

3. Go to app/javascript/application.js file and add the following:

   import "custom/main"
   

4. Run In your terminal:

   rails assets:prepile
   

5. Start your rails server. Voilà