I have a react project configured with Vite.
Hot reload works great, but I use react-i18next
for multiple language support and this is my structure:
public -> en -> translation.json -> ru -> translation.json
When I change the translation.json
files, Vite doesn’t watch it, and I have to refresh the page to see the changes.
Is there a way to tell Vite to watch all the files in the public
directory?
Advertisement
Answer
You can achieve that with a plugin.
I made a mistake on my first answer, it should be a full-reload
event and not a update
event
export default function CustomHmr() { return { name: 'custom-hmr', enforce: 'post', // HMR handleHotUpdate({ file, server }) { if (file.endsWith('.json')) { console.log('reloading json file...'); server.ws.send({ type: 'full-reload', path: '*' }); } }, } }
then add the plugin in vite.config.js
:
{ plugins: [ CustomHmr() <--- custom plugin ] }
💡 I made you a repo on Github with a working example: