Webpacker recompilation does not catch new translations

[morgoth]

I'm handling my javascript through webpacker in the Rails 6.1.3 app.

To not litter my git repository with generated translations file (through i18n:js:export), I'm using a technique described here https://gist.github.com/bazzel/ecdff4718962e57c2d5569cf01d332fe which works great!

However I have an issue with catching up translation changes on webpack compilation as Rails translation files are not tracked by webpacker, so on production deploys (where the precompilation cache is enabled) it might happen that new changes are not picked up.

I know that linked technique is not officially supported, but I think it's a great improvement and maybe you know a way how this could be fixed?
With #590 plans by @fnando , having better webpack support would be nice.

[PikachuEXE]

I actually do the same in my main project

// `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

My import is like

import(
  /* webpackMode: "eager" */
  "./../../../../assets/javascripts/plugins/i18n-js/index.ts.erb"
)
.then(({default: I18n}) => {
  // region assign existing locale
  try{
    if (typeof window.I18n.defaultLocale === "string") {
      I18n.defaultLocale = window.I18n.defaultLocale
    }
  }
  catch (e) {
    // Do nothing
  }
  try{
    if (typeof window.I18n.locale === "string") {
      I18n.locale = window.I18n.locale
    }
  }
  catch (e) {
    // Do nothing
  }
  // endregion assign existing locale

  window.I18n = I18n
})

My layout would have this code

-# I18n JS
-#
-# Hack: we pass `valid_external_locale_sym_from_params` to
-# avoid the need to use special mappings when generating routes
:javascript
  (function(I18n) {
    I18n.defaultLocale = "#{I18n.config.default_locale}";
    I18n.locale = "#{valid_external_locale_sym_from_params}";
  }(this.I18n = {}))

[morgoth]

Thank you @PikachuEXE
This works!

On a sidenote, I have a bit different setup:

// packs/i18n-language.js
import I18n from 'i18n-js'
window.I18n = I18n
I18n.locale = document.documentElement.getAttribute('lang')

// packs/i18n/en.js.erb
/* rails-erb-loader-dependencies ../config/locales/ */
I18n.translations['en'] = <%= I18n::JS.filtered_translations[:en].to_json %>

// packs/i18n/fr.js.erb
/* rails-erb-loader-dependencies ../config/locales/ */
I18n.translations['fr'] = <%= I18n::JS.filtered_translations[:fr].to_json %>

and then in my view files:
<%= javascript_packs_with_chunks_tag "i18n-language", "i18n/#{I18n.locale}" %>

Do you think it would be worth documenting in the readme this way of setting up i18n-js in the project?
I believe it is the best way for production environment

[PikachuEXE]

README updated to include this issue