i18n-js facing issue with webpacker

[sonureddoorz]

Facing lots of issues while integrating i18n-js with webpacker in ruby on rails application:-

Steps which I tried :-

• yarn add i18n-js below is my package.json file

  
  {
  "name": "ezeKey",
  "private": true,
  "dependencies": {
  "@rails/actioncable": "^6.0.0",
  "@rails/activestorage": "^6.0.0",
  "@rails/ujs": "^6.0.0",
  "@rails/webpacker": "^4.2.0",
  "datatables.net-se": "^1.10.20",
  "i18n-js": "^3.5.0",
  "jquery": "^3.4.1",
  "jquery-ui-dist": "^1.12.1",
  "json-loader": "^0.5.7",
  "moment": "^2.24.0",
  "select2": "^4.0.12",
  "turbolinks": "^5.2.0",
  "webpack-jquery-ui": "^2.0.1",
  "yaml-loader": "^0.5.0"
  },
  "version": "0.1.0",
  "devDependencies": {
  "webpack-dev-server": "^3.9.0"
  }
  }

* added in application.js file 

window.jQuery = $; window.$ = $; require("@rails/ujs").start() require("turbolinks").start()

require("@rails/activestorage").start() require("channels") require("jquery") require("jquery-ui") require( 'datatables.net-se' ) import 'select2'; import moment from 'moment' window.moment = moment import I18n from 'i18n-js'

But still getting message :-  **Uncaught TypeError: I18n.t is not a function**
![Screenshot 2019-12-05 at 4 18 55 PM](https://user-images.githubusercontent.com/51312436/70228776-f873a980-177a-11ea-995a-381b696f99a4.png)

[PikachuEXE]

How/where do you call I18n.t? Maybe try adding window.I18n = I18n to see if it's context related issue

[sonureddoorz]

Sorry not working for me. :( I have also followed this link but not succeeded. Still not working any functions of I18n-js. https://github.com/fnando/i18n-js/issues/514

[PikachuEXE]

From what I see your home.js createDataTable is trying to call I18n.t("something") So I think I18n import should be present in that file If not, it's relying on the global I18n (which is why I suggesting adding window.I18n = I18n)

Did you try to run I18n.t("something") on console manually after adding window.I18n = I18n? At least you can find out of the import is not working or the import is not placed in the right place

[sonureddoorz]

When I added below code in home.js, error is removed on page reload import I18n from 'i18n-js' window.I18n = I18n But running code on console manually after adding window.I18n = I18n still it is showing the same error. :(

[PikachuEXE]

I am not sure how you generates your translations Here is my example: app/assets/javascripts/plugins/i18n-js/index.ts.erb

<%# encoding: UTF-8 %>

// Tell webpack to watch these files
// https://github.com/usabilityhub/rails-erb-loader#dependencies
/* rails-erb-loader-dependencies ./../config/locales/ */

import I18n from "i18n-js"

I18n.translations = <%= I18n::JS.filtered_translations.to_json %>;

export default I18n

[chakrihacker]

I think it's because binding in 3.5.1, not sure My app is breaking saying missing translations for 3.5.1, but 3.5.0 everything works fine

[sonureddoorz]

Already fixed in my app.

[PikachuEXE]

Alright I am closing this coz issue author reported success

@chakrihacker Yours might be another issue Please open an issue with some details like code example so I can try to reproduce your issue Or create a failed test case to prove something is broken

[chakrihacker]

ok @PikachuEXE