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 prepilation with:

# asset.rb
Rails.application.config.assets.prepile += ['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 piled or I get a 404 error.

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

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 prepilation with:

# asset.rb
Rails.application.config.assets.prepile += ['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 piled or I get a 404 error.

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

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

Share Improve this question Follow asked May 14, 2022 at 14:02 VivianaViviana 15166 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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";