CODEWITHSUNDEEP
javascriptruby-on-railsimport-maps
Jeff Zivkovic
Jeff Zivkovic

Reputation: 587

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:[email protected]/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:[email protected]/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:

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.

Upvotes: 4

Views: 1749

Answers (2)

Jeff Zivkovic
Jeff Zivkovic

Reputation: 587

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.

Upvotes: 1

mechnicov
mechnicov

Reputation: 15248

This answer is not about importmap but about a specific problem that you are solving:

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

Rails have DateHelper#time_ago_in_words

And you can call it in your view as

Posted <%= time_ago_in_words(post.created_at) %> ago

It is also have alias distance_of_time_in_words_to_now

Also this method can be used with locales (you have to correctly write translations in the locales files) because it uses distance_of_time_in_words under the hood

Upvotes: 1

Related Questions