HMR not working on Vite + Electron

[danikaze]

Describe the bug
I guess this is more of a question than a bug... but I'm trying to get HMR on i18next on a project based on @quick-start/electron.
It doesn't use vite directly, but electron-vvite. Still, I think I configured it properly based on the vite example from the repo...

Loading the page, I get the [I18NextHMR] Client HMR has started message meaning client is waiting for updates properly.
But in the server side, there's no trigger for changes.

Trying to investigate, I edited the lib/vite/plugin.js and added some old-fashioned console logs in both of the functions:

configResolved(config) {
      console.log('i18next-hmr config resolved');

which looks ok as it prints when starting the dev build...

and

handleHotUpdate({ file, server }) {
      console.log('i18next-hmr handleHotUpdate');

which doesn't log anything...

So what I understand from this is that Vite is not notifying the plugin about the file having changed? therefore nothing sent through the server websocket...

Is there anything extra needed to "watch" the locales .json for changes?

please complete the following information:

• OS: Win 10
• Version: [e.g. 1.x]

[felixmosh]

Hi @danikaze, thank you for reporting this issue.
I'm not sure how this electorn-vite lib works, for "regular" vite project you don't need to make any changes.
The issue is probably related to the location of the locale files, (which means that Vite is not watching changes in it).

you need probably to add the locales folder to the watcher here
https://electron-vite.org/guide/hot-reloading#enable-hot-reloading

Can you make a small repo that reproduces this issue?

[danikaze]

Hi @felixmosh , thanks for your quick response.

Probably not the minimum repo to reproduce this... but it's usable and easy to reproduce here:
https://github.com/danikaze/electron-tsx-app/tree/i18n (branch i18n)

Just running the app (npm run dev) and clicking in the yellowish button to render the <TestApp> should be enough.
Then, translations are in resources/locales and the vite config is on electron.vite.config.ts...

[felixmosh]

OK, so I've tested it...

Vite of the renderer not watching resources folder (probably root is defined to be src/renderer)

I've managed to "solve" it by moving locales to renderer/public folder
From electron-vite docs, https://electron-vite.org/guide/assets#public-directory, renderer has a public folder, which is copied to resources on build.

Or by changing renderer.publicDir to resources folder.

and... fixing a bug in i18next-hmr (use v3.1.3), and ...

Screen.Recording.2024-08-22.at.18.03.07.mov

[danikaze]

Thanks @felixmosh !

But uhm, I didn't manage to make it work...

I can see in the video that the .json files are still in the original resources/locales folder so I imagine you just added the renderer.publicDir: resolve(__dirname, 'resources') in electron.vite.config.ts?

So, I did the same AND updated i18next-hmr to v3.1.3... and still nothing changed in my side.

In any case, my idea was to once I get this working, do not copy the files into the packed resources folder, but instead create a locales.ajar or similar... therefore I'll still keep investigating on being able to watch it.

But for now, I'd like to at least achieved what you did :P

Would you mind, if you still have that repo on your local, to have a commit with those changes and push? or show me a patch so I can apply it here?

[felixmosh]

I've made a PR to your repo

[danikaze]

Yeah... still not working for me even with the same changes... (Windows)

wait for other tests...

BUT
It works on my mac laptop...
Is maybe a windows problem related to Vite files watching? uhm, interesting...

Thanks a lot!

[felixmosh]

Check paths...

[danikaze]

Check paths...

Even if the same code works in Mac?

[felixmosh]

Check that the paths are constructed correctly, maybe there is some issue with it