Sprockets::FileNotFound: couldn't find file 'i18n' with type 'application/javascript'

[SuprajaSuresh]

Facing this error: Sprockets::FileNotFound: couldn't find file 'i18n.js' with type 'application/javascript' Agter upgrading to Rails 7.0.0, Ruby 3.0.3.
I have tried both: gem 'i18n-js', ">= 3.0.0.rc11" as well as gem 'i18n-js'.
Included all three
//= require i18n
//= require i18n.js
//= require i18n/translations

This works fine with rails 6

[PikachuEXE]

Do you have another gem that has JS included but succeed?
We have no idea what Rails 7 changed

[Dherlou]

Is there any progress on this? Unfortunately, I have been facing the same issue since updating to Rails v7.

[andrewm-mitchells]

Same here, since the update this package stopped working and I can't include/require js files as they don't exist in the gem folder. The documentation is not very clear too. I've tried v3 and v4 but no luck so far.

[Dherlou]

There is no JavaScript in the Gem anymore, because the Gem now only includes the Ruby on Rails part to export the translations to a json file (described in the README.md). To actually use the translations in JavaScript in the client's browser (which is probably what you want to do), you have to install the JavaScript-companion separately:
To use the JavaScript companion with the 'old' sprockets-only approach (no ES, just copy&paste bundling with //= require directive), you can do the following:

• checkout the companion project https://github.com/fnando/i18n
• install nodejs+yarn+tsc
• build the browser version with yarn install && yarn run build:browser
• copy the built js-file from dist/browser/index.js to a JavaScript directory-file (see your app/assets/config/manifest.json) in your rails project (e.g. vendor/assets/javascripts/i18n.js)
• require the file in your application.js with //= require i18n.js
• write some wrapper code that loads the exported translations from the previously exported json file and provides them as the I18n-variable (like it used to be before):

const locale = $("body").data("locale") || "en";

// Uses I18n-Library under `vendor/assets/javascripts/i18n.js`
I18n = new I18n.I18n();
const request = new XMLHttpRequest();
request.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
    I18n.store(JSON.parse(this.responseText));
    I18n.defaultLocale = "en";
    I18n.enableFallback = true;
    I18n.locale = locale;
  }
};
request.open('GET', '../../locales/translations.json', false); # this needs to be a location under `public` so that it can be accessed via HTTP.
request.send();

(Locale detection and paths need to be adjusted to your code structure.)

That being said, it is a quite inconvenient process for us users, but as the Rails asset pipeline is changing permanently (e.g. sprockets being replaced by Propshaft in Rails v8), it is also just a deprecated workaround and a migration to a new asset pipeline approach (see link above) that supports ES to simply use the prebuilt i18n-js packages via yarn/npm is unavoidable at some point in the future.

[espen]

What is yarn run build:browser and what is required to run it?

[Dherlou]

It uses webpack to bundle the project's code into a single JavaScript file, which can be used as a library in the browser (as opposed to commonjs or ESNext modules, which are the other build targets).
I think you only need to install nodejs (which brings npm along), then install yarn with npm and finally tsc (typescript compiler). After that you should be good to run this build target and find the resulting file under ./dist/browser/index.js.