Rails 'local-time' gem not running JS

Question

I'm trying to use the local-time gem by Basecamp. Following the Readme, I added

//= require local-time

to my app/assets/config/manifest.js, which now looks like this:

//= link_tree ../images
//= link_directory ../stylesheets .css

//= require local-time

I then use the gem as prescribed:

<%= local_time(comment.created_at) %>

which, as per the Readme, renders

<time data-format="%B %e, %Y %l:%M%P"
      data-local="time"
      datetime="2013-11-27T23:43:22Z">November 27, 2013 11:43pm</time>

The Readme also claims that JavaScript, i.e., the client, would then convert this to:

<time data-format="%B %e, %Y %l:%M%P"
      data-local="time"
      datetime="2013-11-27T23:43:22Z"
      title="November 27, 2013 6:43pm EDT"
      data-localized="true">November 27, 2013 6:43pm</time>

But I can see that this does not happen for me. The markup generated by local_time remains untouched in the DOM.

In fact, the word "local" appears 0 times in the compiled application.js my browser receives.

It's possible there's something wrong with the gem, but for now I'm assuming that I'm doing something wrong. My Ruby code seems to be finding and using the gem just fine, but for some reason, the JS part never runs.

What am I doing wrong?

EDIT: I'm using Rails version 6.0.3.4, Ruby version 2.6.5p114, and local-time version 2.1.0.

what do you have in your `app/javascript/packs/application.js` ? — Jad, Dec 22 '20 at 15:58
`require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels")` at the top — plus some other unrelated JS. — Dennis Hackethal, Dec 22 '20 at 19:03
Can you try putting your require in the application.js file, and then trying again? — Jad, Dec 22 '20 at 22:01

score 2 · Accepted Answer · edited Feb 02 '23 at 19:56

2

Merovex's answer was a good temporary workaround, but according to paulanunda's comment on the GitHub issue, there is a much simpler way:

$ yarn add local-time

And instead of messing with the manifest.js file, just put the following in your application.js file:

import LocalTime from 'local-time';
LocalTime.start();

edited Feb 02 '23 at 19:56

Hipjea

391
5
14

answered Jan 14 '21 at 02:50

Dennis Hackethal

13,662
12
66
115

score 1 · Answer 2 · edited Jan 14 '21 at 02:51

I ran into the same problem. This seems to work until Rails 6.

In Rails 6, JavaScript assets are no longer included with the app/assets/ directory and instead have been moved into a separate directory app/javascript handled by Webpacker. That's great, but when I wanted to add some custom javascript of my own, there wasn't any clear documentation that described how it should be done.

https://dev.to/morinoko/adding-custom-javascript-in-rails-6-1ke6

In my /app/javascript folder, I created a sub-folder /app/javascript/helpers. In that folder, I placed local-time.js directly from the GH repo. Then, I added the following bit of code to /app/javascript/packs/application.js

import LocalTime from 'helpers/local-time'
LocalTime.start()

As of my writing, I did this five minutes ago, in my view

<p>Time Ago: <%= local_time_ago(Time.now) %></p>

reads

Time Ago: 5 minutes ago

This works as a workaround. For posterity, I recommend linking to the specific JS file used in the gem's current version [here](https://raw.githubusercontent.com/basecamp/local_time/5edd54f5e1e79bcb8e512ba1f89077241f55fc8c/app/assets/javascripts/local-time.js). — Dennis Hackethal, Jan 01 '21 at 07:05

Rails 'local-time' gem not running JS

2 Answers2