Trying to Create a Preview with Stimulus Doesn’t Work in Rails

When building an image preview feature using Stimulus and Active Storage in Rails 7, everything may look correctly set up, but the connect() method in your Stimulus controller never runs. There are no console errors, and the preview doesn’t appear.

The Problem: Missing <%= javascript_importmap_tags %> in Layout

Even if your controller is correctly defined and imported, without this tag in your application.html.erb, the browser won’t load your JavaScript:

Without this line, Rails won’t load the Stimulus controllers you defined in your app/javascript/controllers directory. The result is a silent failure: no JavaScript runs, and connect() is never triggered.

What You Might Have Done Correctly

The stimulus controller is defined with valid targets and logic
Controller is placed in app/javascript/controllers

importmap.rb includes:
application.js imports:

application.js imports:

View includes:

Despite all this, the controller won’t initialize until the importmap is loaded via the helper tag.

The Fix: Add the Missing Tag

Open your layout file (application.html.erb) and add this inside the :

<%= javascript_importmap_tags %>

Then restart your Rails server (bin/dev or rails server) to apply the changes.

Conclusion

This issue is subtle but common when using Rails 7 with import maps. If your Stimulus controller isn’t connecting and you see no errors in the console, always check that the javascript_importmap_tags helper is present in your layout. It ensures that your entire JavaScript setup, including Stimulus, loads properly in the browser.

Also Read:

Best Ruby On Rails Gems