Uninitialized constant error after running bundle install

[csalmeida]

Hey everyone,

This gem is great, thanks to the maintainers and contributors for working on it.

I got the following error after running a bundle update on a Rails app and not sure how to get past it.

When I run bin/dev

rails_app/config/application.rb:30:in `<class:Application>': uninitialized constant I18n::JS (NameError)
config.middleware.use I18n::JS::Middleware
                                           ^^^^

I haven't changed any code at all in the app and the config.middleware.use I18n::JS::Middleware is in application.rb:

    # Enables translations to be available on JavaScript files.
    config.middleware.use I18n::JS::Middleware

Here's what the Procfile.dev commands are, these run when bin/dev is used:

web: bin/rails server -p 3000
js: yarn build --watch
css: yarn build:css --watch
worker: bundle exec sidekiq -C config/sidekiq.yml

The Gemfile includes the dependency:

# Used to pass translations to JavaScript files.
gem "i18n-js"

The JavaScript is bundled with esbuild.

Removing the dependency gets the app to work but I would like to keep using the gem to pass translations over to the JavaScript side of things.

If anyone has any tips on how to get past this or could share their thoughts I would appreciate it! 🙏

[fnando]

Looks like you're migrating from v3 to v4. V4 works totally different and has no middleware. Please take a look at this document to know the differences: https://github.com/fnando/i18n-js/blob/main/MIGRATING_FROM_V3_TO_V4.md

[csalmeida]

Thanks, Nando! That makes a lot of sense, I didn't specify the version I was using in the Gemfile, I did that now and am going through upgrading.

I have managed to add the JS dependencies and the new version of the gem, to configure it with Guard and it generates the files as expected, however, I am unsure of what I'm missing to import the transitions into the i18n.

I export the following files (config/i18n.yml:

translations:
- file: 'app/javascript/i18n/en.json'
  patterns:
    - "en.*"
- file: 'app/javascript/i18n/pt.json'
  patterns:
    - "pt.*"

Before I had JS files instead but following the guide it seems to suggest it outputs JSON, no problem with that but when it comes to instantiating I18n, what would be the best way to pass the *.json files to the instance?

import { I18n } from "i18n-js";
import translations from "translations.json"; // <-- 

// Fetch user locale from html#lang.
// This value is being set on `app/views/layouts/application.html.erb` and
// is inferred from `ACCEPT-LANGUAGE` header.
const userLocale = document.documentElement.lang;

export const i18n = new I18n();
i18n.store(translations);
i18n.defaultLocale = "en";
i18n.enableFallback = true;
i18n.locale = userLocale;

Obrigado, Nando! 🙏

[csalmeida]

After reading some of the source code I found that something like this works:

import { I18n } from "i18n-js";
import { en } from '../en.json'
import { pt } from '../pt.json'

const translations = {
  en: en,
  pt: pt
}

// Fetch user locale from html#lang.
// This value is being set on `app/views/layouts/application.html.erb` and
// is inferred from `ACCEPT-LANGUAGE` header.
const userLocale = document.documentElement.lang;

export const i18n = new I18n();
i18n.store(translations);
i18n.defaultLocale = "en";
i18n.enableFallback = true;
i18n.locale = userLocale;

I should probably use a single file as the guide suggests as having multiple languages will make the imports a bit long but this works well for now and makes each JSON file more manageable to inspect if needed.

Thanks again for the help!