importmap-rails | Use ESM with importmap to manage modern JavaScript

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 trying to get this link to work, performing a DELETE request:

I'm trying to set up my first Rails 7 app and have installed Bootstrap 5 properly (you can see by the CSS) and gotten rid of all the error messages, but the javascript functions (i.e. dropdown menus, offcanvas, etc.) aren't working.

I have tested it with this code:

I created a simple Rails 7 application with Post, Comment models using Tailwindcss.

And I have a problem with importing the highlight.js library to render syntax code in Trix editor.

This is config/importmap.rb:

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.

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;