Not working - am I missing something?

[paddotk]

Hi,
I've followed the readme, and additionally installed the i18next and react-i18next packages. The 'fs' module can still not be used in Electron though. It's unclear how to use the config that has this code:

...
i18n
  .use(backend)
  .use(initReactI18next)
  .init({
...

but I saved in a separate file called i18n.config.js and import it in my index.html file.
The devtools console does show a i18next initialized message and object, but I still can't use fs. Could you please elaborate on how this should be used?

[reZach]

Hi @paddotk, you can take a peak at secure-electron-template as an example of how this can be integrated, but in short, here's how the package functions.

high level overview

summary

i18next-electron-fs-backend is a custom i18next backend to return translations in a "renderer" (ie. view) in an Electron app. Since for Electron apps to be secure, the renderer and main processes need to be split. The responsibility of the main process will be to use fs (to access raw translation data), while it's the renderer process that will request these translations by sending IPC messages.

The renderer process gets the code to send IPC messages when you call the preloadBindings method in the preload file.

Now, since you've defined your i18next config file with this i18next-electron-fs-backend backend, anytime the renderer process tries to access a translation, it's going to make an IPC request that will be received by the main process.

The main process's IPC bindings are configured by the .mainBindings call.

The basic flow is:

1. Renderer/view tries to render a translated word
2. i18next config that was defined in the preload file tries to load the word
3. The code (ie. the i18next-electron-fs-backend package) sends an IPC message to the main process requesting the translated word
4. The IPC listener configured by .mainBindings receives the IPC message and uses fs to read the file and send a return IPC message to the renderer process
5. The i18next library has the translated word and returns the translated word that's rendered in the renderer/view

---

You should not need to use fs anywhere except passing it as a parameter in your main file as it's outlined in the readme.

[tustin2121]

Still not helpful. Where am I supposed to be using the unlabeled "Based on documentation..." file? Is that supposed to be accessed from the renderer process? Because I can't import node modules in the renderer process with import ... from syntax, and turning on node integration and using require throws errors about passing the wrong module. But clearly I'm not supposed to be using it in the main process, because I need to get at the t function somehow...

//*  
// Uncaught error: You are passing a wrong module! Please check the object you are passing to i18next.use()
const i18n = require('i18next');
const backend = require('i18next-electron-fs-backend');
/*/
// Uncaught TypeError: Failed to resolve module specifier "i18next". Relative references must start with either "/", "./", or "../".
import i18n from 'i18next';
import backend from 'i18next-electron-fs-backend';
//*/

i18n.use(backend).init({ /* ... */ });
export default i18n;

EDIT: Using require and passing backend.default instead of just backend seems to fix it, but now I'm running into a new problem. It seems like you're assuming that I'm going to be using window.api as my "exposed in main context" variable, despite me having to pass in the variable already in the backend settings? But that's different bug, so I'll say no more here.

[reZach]

@tustin2121, another user reported issues of using window.api here too. I pushed a fix to address configurations that might not be using window.api, can you see if this latest release fixes your problem?

[tustin2121]

I thank you for the update. Looking at the changelog, it probably would work for me, but I can't test it specifically anymore. After I made the above comment, I forked the repo with intent on trying to maybe make something to put into a pull request. Simply removing the check that you updated in the latest version was enough for it to function for testing in my app, but I ran into other unrelated issues with i18next and its async nature, so I ended up abandoning the base library in favor of a more custom solution. But if I go back to i18next later or in another project, the update will be greatly appreciated. Thanks.