I’m unable to get stimulus and importmaps to read files from an app engine. The current project I’ve been tasked to do involves me upgrading all legacy engines to use importmaps and stimulus JS. The documentation is a bit misleading as it does not work the way any of the documentation lays out to use them.
Note :: I did not choose app structure, I’m working with what I was given and it is not my place to decide that the current structure is correct or incorrect, so please assume that this is my only option for structure.
Structure
Main App (Rails ==> gem ‘Engine 1’, gem ‘Engine 2’) only it works as a nested rails app.
— Engine 1
— Engine 2
— Engine 3
The Main App Code
- The main app includes all the manifest files and has a working stimulus setup for the items that the main app controls.
The Engine Code
- When Using a
<%= javascript_importmap_tags %>
in the engine, the main apps controls are loading, but none of the engines javascript controllers. Documentation says that it needs an importmap and it needs its own manifest etc.
engines/myengine/assets/config/myengine/manifest.js
//= link_tree ../../images/appetite
//= link_directory ../../stylesheets/appetite .css
//= link_directory ../../stylesheets/appetite .scss
//= link_tree ../../../javascript
engines/myengine/config/importmap.rb
pin_all_from "app/javascript/controllers", under: "controllers/myengine"
engines/myengine/lib/myengine/engine.rb
# engines/appetite/lib/appetite/engine.rb
module MyEngine
class Engine < ::Rails::Engine
isolate_namespace MyEngine
initializer :importmap, before: :importmap do |app|
app.config.importmap.paths << root.join('config/importmap.rb')
end
end
end
engine/…/example_controller.js
import { Controller } from "@hotwired/stimulus";
export default class extends Controller {
connect() {
console.log("Example controller connected");
}
}
I’ve tried lots of steps in between and even tried just linking pinning the files from the main app, but nothing seems to work. Any ideas and help would be appreciated.