Search code examples
javascriptruby-on-railsimport-maps

Rails 7, Browser seems to be ignoring all importmap javascript packages


Last week I followed two different tutorials. I was able to get everything working, except for three important issues. I realized that the connection between all three issues is that they all involve the browser seeming to ignore the javascript packages from importmap script tags.

The first tut is the Rails 7 Demo from DHH. There he pins the LocalTime package to display how long ago a post was created. My second instance of this problem comes from later in the same demo, where he makes use of the turbo package to add a turbo stream to a view to give it live updates. The last instance comes from a Learnetto tutorial, where the author demonstrates importing React components that he writes in the javascript folder.

To keep this post concise, I'll just show my code for the first problem: the time-ago method from the LocalTime package. I'm hoping that the problem I'm missing in this process will help me fix the other two problems. But if anybody thinks it would be helpful to see my code for the other two problems, I'll be happy to add them.

Versions and gems

Rails version: 7.0.3.1
Ruby version: 3.0.0p0
Gemfile: gem "importmap-rails" (Came standard with a rails new app)
Gemfile.lock: importmap-rails (1.1.5)
Safari browser: 15.6 (Enable javascript is checked on.  I also tried it in Chrome.)

config/importmap.rb

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loding.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"

pin "trix"
pin "@rails/actiontext", to: "actiontext.js"
pin "local-time", to: "https://ga.jspm.io/npm:local-time@2.1.0/app/assets/javascripts/local-time.js"

app/javascript/application.js

import "@hotwired/turbo-rails"
import "controllers"
import "trix"
import "@rails/actiontext"
 
import LocalTime from "local-time"
LocalTime.start()

application.html.erb (In head tags)

<%= javascript_importmap_tags %>

Relevant lines from Web Inspector in browser in development-environment :

<!DOCTYPE html>
<html>
<head>
<script type="importmap" data-turbo-track="reload">
***(All of the imports that I expect to see are here, including the important one:)***
"local-time": "https://ga.jspm.io/npm:local-time@2.1.0/app/assets/javascripts/local-time.js",
</script>
<link rel="modulepreload" href="....">. ***(Four of these)***
</head>

app/views/post/post/html.erb

Posted <%= time_tag post.created_at, "data-local": "time-ago" %>

What I expect to see in the view: Posted 10 minutes ago

What I see: Posted August 19, 2022 19:57 (Same result as when I leave out "data-local": "time-ago")

Some other things I've tried:

  • Putting non-existent packages in the importmap.rb and the application.js file to test whether that causes an error. (It doesn't. The fake packages don't appear in the script tags in the web inspector).
  • Downloading the packages the vendor/javascripts folder instead of using the CDN

Side question: Does anybody know how I can test whether ANY importmap js is running in my browser?

Thank you in advance for any insight.


Solution

  • I finally managed to notice the typo that was causing this problem.

    My importmap file read:

    pin "@hotwired/stimulus-loading", to: "stimulus-loding.js", preload: true
    

    instead of

    pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
    

    (The letter "a" in the word loading was the problem).

    Apparently, this was causing all of my javascript packages to fail. As soon as I fixed this typo, my turbo_streams started working as well.