Last week I worked through two different tutorials, successfully achieving most of the tasks. However, three crucial issues remain unresolved. Upon closer inspection, it became evident that all three problems revolve around the browser seemingly disregarding javascript packages imported via importmap script tags.
The first tutorial is DHH's Rails 7 Demo. In this demo, he uses the LocalTime package to display how long ago a post was created. The second instance of this issue arises later in the same demo, where he employs the turbo package to introduce a turbo stream for live updates in a view. The final occurrence comes from a Learnetto tutorial, where the author showcases importing React components from the javascript folder.
For brevity, I will focus on sharing my code related to the initial problem: the time-ago method using the LocalTime package. By solving this particular issue, I hope to resolve the remaining two as they appear interconnected. However, if deemed necessary, I am willing to provide the code for the other two challenges upon request.
Versions and gems:
Rails version: 7.0.3.1
Ruby version: 3.0.0p0
Gemfile: gem "importmap-rails" (Included by default in a new rails app)
Gemfile.lock: importmap-rails (1.1.5)
Safari browser: 15.6 (JavaScript enabled with testing also conducted 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:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="274b4844464b0a534e4a42671509160917">[email protected]</a>/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 (Inside head tags):
<%= javascript_importmap_tags %>
Relevant excerpts from Web Inspector in browser in development environment:
<!DOCTYPE html>
<html>
<head>
<script type="importmap" data-turbo-track="reload">
***(All expected imports are listed here, including the crucial one:)***
"local-time": "https://ga.jspm.io/npm:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9a5a6aaa8a5e4bda0a4ac89fbe7f8e7f9">[email protected]</a>/app/assets/javascripts/local-time.js",
</script>
<link rel="modulepreload" href="....">. ***(Four instances of these)***
</head>
app/views/post/post/html.erb:
Posted <%= time_tag post.created_at, "data-local": "time-ago" %>
Expected output in the view: Posted 10 minutes ago
Actual output observed: Posted August 19, 2022 19:57 (The same result appears even when omitting "data-local": "time-ago")
Here are some additional troubleshooting steps attempted:
- Inserting non-existent packages in both the importmap.rb and application.js files to test for potential errors. (No errors were triggered, and the fake packages did not show up in the script tags within the web inspector).
- Downloading the packages into the vendor/javascripts folder instead of utilizing the CDN
Additional query: Is there a way to verify if ANY importmap js is functioning in my browser?
Thank you in advance for any guidance provided.