Alternatives to deprecated Webpack’s i18n plugin and loader

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

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.

Advertisement

Answer