I am currently working on a TypeScript project that requires loading translations from individual .json files assigned to each country. For instance, we would have separate language files like en.json, es.json.
The goal is to be able to access these translations within the .ts files using a function similar to __('red') or any comparable method provided by other extensions.
Subsequently, the compiled .js files should embed all the translations in order to enable real-time language switching.
The structure of the json files might look something like this:
es.json
{
"colors": {
"red": "rojo",
"blue": "azul"
}
}
It appears that the current recommended i18n loader and plugin for Webpack mentioned in the documentation are now deprecated:
- Plugin: I18nWebpackPlugin
- Loader: I18nLoader
I am uncertain about whether it is safe to utilize these extensions or if there are alternative options available that cater to my specific needs. I experimented with i18next and i18next-loader but encountered compatibility issues with my current setup, possibly due to how module imports are processed. Therefore, exploring other lightweight alternatives compatible with Webpack + TypeScript could potentially resolve this challenge.
Below are the dependencies listed in my package.json file:
{
"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"
}
}