stimulus-rails | Use Stimulus in your Ruby on Rails app | Application Framework library

I'm very new to Rails and full-stack development in general. I've just finished Michael Hartl's Ruby on Rails Tutorial 6th edition and am walking through it again to build my first project (i.e. an app that's different from the sample app built in the book, but draws on a lot of the same lessons). Catch is that new project is using Rails 7.

It was going well until I ran into issues around Chapter 7; my app will not render a partial with error messages for bad submissions to the new user form. The code in the partial executes (as verified with debugger, and later with a puts statement to output on console), but the HTML doesn't output (i.e. it cannot be found when inspecting the page in Chrome). There is a CSS issue related to newer version of bootstrap, but I even tried downgrading to the bootstrap version from the book (3.4.1) with no luck. (the offending CSS segment is commented out below)

I've banged my head on this for a few hours. Hoping it's just something dumb I'm missing. If it's a broader issue with Bootstrap vs Importmaps or something I'd also appreciate references on good places to learn these. I am extremely grateful for any ideas!

Edit This definitely isn't an issue with passing local variables into the partial; see code snippet and comment added at the end of this post.

app/views/users/new.html.erb:

I am learning Hotwire-rails, following both the gorails.com and the Hotwire.dev examples. I am running Ruby 3.0.2 and Rails 6.1.4.1. The symptom is at the very start. After rails new xxx, I edit Gemfile to add gem 'hotwire-rails', then bundle install. At this point my app/javascript/packs/application.js is now:

I have a new rails 7 application which is using the importmap-rails gem to manage the javascript frontend libraries.

I am attempting to use the Semantic-UI library, but the dependency for jQuery is not being recognized by the Semantic-UI javascript.

I was unable to pin the Semantic-UI library via importmap, so I added this library to the importmap.rb manually. Here is a link the cdn for semantic.min.js I am using.

The following error message appears in the console on Chrome Web Tools and the collapsible accordions are not functioning that I have on the page to validate the javascript.

Following an article I am trying out Rails Hotwire and want to create a simple blog that works like a single-page app (i.e. using turbo_stream to crud posts and comments without reloading the entire page). I would also like to play a bit with actioncable at the same time by making the crud actions real-time for all connected browsers.

So far, it is working except for the real-time part of the comments on posts when I display a specific post (i.e. posts/show).

It probably has to do with the identifiers I used for the turbo_frame_tags and/or the way I broadcast but I can't seem to find the answer. I looked at this question and also a GoRails example of something similar but it still does not work.

My current posts/index

I'm having a JS issue with my first Rails app, which I suspect is related to my using import maps instead of Webpack. I've searched and searched but haven't found any discussions of this.

It's a Rails 6 app with some JS via Stimulus, which I installed by adding importmap-rails and then stimulus-rails. It works fine locally, but in production on Heroku the JS doesn't work and I see errors like this in the browser console: Uncaught (in promise) Error: Unknown Content-Type "text/html; charset=utf-8" doFetch https://plainreading.herokuapp.com/assets/es-module-shims-424762490b07cc7f9a37745e8b53356bca11997a8e313f47d780e29009df7e8e.js:580

I'm wondering if it's because I removed Webpack from my app, using How to completely remove webpack and all its dependencies from Rails App. I removed it because I was getting Webpack-related build errors in Heroku, and it's my understanding that I don't need Webpack if I'm using import maps.

A while ago I fixed a similar issue in a static site on Netlify by including this in its netlify.toml config:

I'm trying to upgrade an existing Rails 6.1 with sprockets app to use stimulus. I installed

I've got a Rails 6.1 app which has been upgraded from Rails 4 -> 5 -> 6, so it's mature.

It still uses asset pipeline and with the future of Rails 7.0 I'm going to keep it that way. I wanted to start using stimulus + importmaps, so I've followed along with the install.

After installing importmaps and stimulus through hotwire I'm getting the following errors in Firefox 91 when loading my app;