How to use and load JS helpers in Stimulus controllers in Rails 7?

Question

I want to import and use functions from my javascript/helpers/functions.js file in my stimulus controllers.

I tried pinning it with:

# importmap.rb
pin_all_from "app/javascript/helpers", under: "helpers"

Add it to the asset precompilation with:

# asset.rb
Rails.application.config.assets.precompile += ['helpers/*']

Also I've tried to import the file in application.js in different ways (not all at once):

// These are all the ways I tried to import the helpers folder in application.js
//= require_tree helpers
import "helpers"
import "./helpers"

In my Stimulus controller, I'm importing it like this

// javascript/controllers/select_controller.js
import {show, hideAll} from "helpers/functions";

As I understand this should work as importmap is mapping it to the helpers namespace but I also tried importing it like this:

// javascript/controllers/select_controller.js
import { show, hideAll} from "../helpers/functions"

I tried all kinds of variations of the above and it works fine locally in development but anytime I run the application in production the helpers folder gets not compiled or I get a 404 error.

How can I use JS helpers in Stimulus controllers the right way?

Answer 1

Found a solution to my own problem:

# importmap.rb
pin_all_from "app/javascript/helpers", under: "helpers"

I needed to import the specific helper file (function.js) in application.js:

// application.js
import "helpers/functions"

In the stimulus controller:

// javascript/controllers/select_controller.js
import {show, hideAll} from "helpers/functions";