egoist / vue-timeago

A timeago component for Vue.
https://vue-timeago.egoist.sh
MIT License
729 stars 104 forks source link

i-18 is not working. #134

Open uwejan opened 3 years ago

uwejan commented 3 years ago

How do we enable translations for other languages, i tried the instructions on main page, i always get locale is not defined` please help.

sudofox commented 3 years ago

I'm having a different but maybe similar issue: It doesn't seem to be using the specified locale for me for whatever reason. It's always using English. At this point I'm probably going to go in and try tweaking the stuff in node_modules until I trace it back to the source.

// https://github.com/egoist/vue-timeago

import Vue from 'vue';
import VueTimeago from 'vue-timeago';
import { en, ja } from 'date-fns/locale';

// TODO: Timeago locale selection isn't working properly

Vue.use(VueTimeago, {
  name: 'TimeAgo',
  locale: 'ja',
  locales: {
    ja,
    en
  }
})
sudofox commented 3 years ago

So I hacked around a bit and added in relative paths to all the "minutes ago" strings. It seems like no matter what I do, it's always using this file (instead of using the date-fns ones)

node_modules/vue-timeago/node_modules/date-fns/locale/en/build_distance_in_words_locale/index.js

I'm not super smart about how dependencies manage their own things inside, but as far as I can tell, it's using its own copy of date-fns and it's an old one as well. Trying to include from the globally-installed date-fns doesn't make any difference as to what it uses.

What's interesting is that it is getting the correct locale when I look at it in the Firefox Vue inspector. It's just not actually using it.

uwejan commented 3 years ago

I confirm the same here as well. No matter what the locale does not change from English.

sudofox commented 3 years ago

VERY TEMPORARY FIX

This is a TERRIBLE HORRIBLE NO GOOD VERY BAD HACK that will PROBABLY BREAK WHEN THIS LIBRARY IS UPDATED. I'm not sure if I understand how it works correctly, but my guess is:

vue-timeago internally pulls in date-fns which npm has installed an older version of within its node_modules folder, e.g

node_modules/vue-timeago/node_modules/date-fns

So it uses that old version, but importing the ja version doesn't work right outside of the scope of vue-timeago's own code since it tries to use the global version of date-fns that I have, which is newer.

I am temporarily working around it by directly importing from that subfolder. Not sure why the en one works as is, don't care.

// https://github.com/egoist/vue-timeago

import Vue from 'vue';
import VueTimeago from 'vue-timeago';

import ja from 'vue-timeago/node_modules/date-fns/locale/ja';
import { en } from 'date-fns/locale';

Vue.use(VueTimeago, {
  name: 'TimeAgo',
  locale: 'ja',
  locales: {
    ja,
    en
  }
})

The only reason I'm doing this is because I need to ship soon. This is a desperate times, desperate measures hack.