How to output a file in i18next via custom plugin? - internationalization

Question

I tried creating a custom plugin to download data from backend using i18next plugin, however, is stuck at data dumping process. I am using NextJS for frontend.
Here is the configuration file for NextJS.
const { i18n } = require('./next-i18next.config.js/index.js')
module.exports = {
reactStrictMode: true,
i18n
}
Here is the next-18next.config.js file content.
const getDefault = ()=>{
return {
parse: data => JSON.parse(data),
addPath: '/locales/{{lng}}/{{ns}}',
}
}
class Backend {
constructor(services, backendOptions, i18nextOptions){
this.init(services,backendOptions,i18nextOptions)
}
init (services,options={},allOptions={}){
this.services = services;
this.options = {...getDefault(),...options};
this.allOptions = allOptions;
}
async read(language, namespace, callback) {
const payloadUrl = this.options.payloadUrl;
this.data = null;
try {
const response = await fetch(payloadUrl);
const payloadData = await response.json();
this.data = payloadData;
}
catch(err){
return callback(err,this.data)
}
this.loadUrl(language,namespace,callback);
}
async loadUrl (language,namespace,callback){
const loadPath = this.options.loadPath;
const url = this.services.interpolator.interpolate(loadPath, { lng: language, ns: namespace});
try {
const response = await fetch(url);
const data = await response.json();
return callback(language,namespace,data)
}
catch(err){
console.log("Error while fetching payload ", err)
callback(err,null)
}
}
save (language, namespace, data) {
console.log(language,namespace,data);
}
create (language, namespace, key, fallbackValue) {
console.log(language,namespace,key,fallbackValue)
}
dumpData(language,namespace,data){
const filePath = this.services.interpolator.interpolate(this.options.addPath, { lng: language, ns: namespace});
// need to find a way to dump the file into the given filePath, (right now
// I cannot find proper way to use fs library)
console.log(filePath, "is the file path")
console.log("data we dumping ", data);
}
}
Backend.type = "backend";
module.exports = Backend;
I am following https://github.com/i18next/i18next-http-backend and have no idea how they are dumping the payload we get from backend to specific folder. I tried doing it manually adding fs library, however we are using NextJS and using fs gives me error Can't resolve 'fs'. How can we dump the data we receive from backend into its required location?

Answer 1

The callback signature is wrong, callback(language,namespace,data) is not correct. The signature should be callback(error, result) => this means you may change it to: callback(null, data)
Additionally, all these are not async functions, plain old callback based functions, like described here: https://www.i18next.com/misc/creating-own-plugins#backend
btw: if you're fetching data from your backend, why do you not simply use i18next-http-backend and adapt the loadPath and or the parse option and/or the request option: https://github.com/i18next/i18next-http-backend#backend-options ?