Alternatives to deprecated Webpack's i18n plugin and loader

Question

I'm working on a TypeScript project that needs to load translations from .json files, the intention is to have a single language file per country. Example: en.json, es.json.

Then I should to be able to use the translations inside .ts files with some function like __('red') or as other extensions offer.

Then the final compiled .js files should contain all translations to switch the language on "real-time".

The content of the json files could be something like:

es.json

{
    "colors": {
        "red": "rojo",
        "blue": "blue"
    }
}

It seems that the current recommended (on the documentation) i18n loader and plugin for Webpack are deprecated:

• Plugin: I18nWebpackPlugin
• Loader: I18nLoader

I want to know if is safe to use this extensions or there are some available options out there for my case, I tried i18next and i18next-loader but it doesn't seem to work on my current setup, it seems to be something related to how modules import process work. So maybe another lightweight alternatives that support Webpack + TypeScipt could solve this issue.

This is my current package.json dependencies

{
  "dependencies": {
    "animate.css": "^3.7.2",
    "i18next": "^19.1.0",
    "intl-tel-input": "^16.0.8",
    "uniq": "^1.0.1"
  },
  "devDependencies": {
    "@alienfast/i18next-loader": "^1.1.4",
    "@babel/core": "^7.7.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babelify": "^10.0.0",
    "browserify": "^16.5.0",
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^3.4.2",
    "file-loader": "^5.0.2",
    "gulp": "^4.0.2",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.1.3",
    "terser-webpack-plugin": "^2.2.3",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.3",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }
}

Answer 1

How about this? @zainulbr/i18n-webpack-plugin

This is forked from the original i18n-webpack-plugin and fixed to support webpack5.

The usage is still same with the original unmaintained repository.

Answer 2

Have you tried webpack-localize-assets-plugin?

It has Webpack 5 support and has a few advantages over the deprecated i18n-webpack-plugin:

• first-class support for multiple locales
• able to read locales from JSON path so you can watch and rebuild on change
• able to report unused string keys