I have a rails 7 app and I’m trying to add hotwire functionality. I am getting an error with pinning stimulus and importing it in application.js
importmap.rb
pin "application"
pin "@hotwired/stimulus", to: "stimulus.min.js"
application.js
import "stimulus.min.js"
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Chargemaster</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
</head>
<body>
hello
<%= yield %>
</body>
</html>
I get the following error loading the page:
TypeError: Failed to resolve module specifier "stimulus.min.js". Relative references must start with either "/", "./", or "../".
I’m not sure what I’m missing here. My understanding is that the importmap defines a module specifier stimulus.min.js and I can use that module specifier to refer to the imported package within my app, such as within application.js.
note: the name “stimulus.min.js” was not what I would have called it; I honestly don’t remember where it came from – either a tutorial or a SO answer or some chatgpt generated code that I tried before bothering real people. It doesn’t make sense to me to use the .min pre-suffix in the name; I have no idea whether the package I’m importing is minified, and just calling it that doesn’t make it so. I’m just trying to learn how this stuff works 🙂
If it helps please feel free to look at the source for the entire project in github:
https://github.com/fredwillmore/climate-control