Tengo un proyecto de reacción configurado con Vite.
La recarga en caliente funciona muy bien, pero uso react-i18next para soporte de múltiples idiomas y esta es mi estructura:
public -> en -> translation.json -> ru -> translation.json Cuando cambio los archivos translation.json , Vite no los ve y tengo que actualizar la página para ver los cambios.
¿Hay alguna manera de decirle a Vite que mire todos los archivos en el directorio public ?
Puedes lograr eso con un plugin.
Cometí un error en mi primera respuesta, debería ser un evento full-reload y no un evento de update
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: '*' }); } }, } } luego agregue el complemento en vite.config.js :
{ plugins: [ CustomHmr() <--- custom plugin ] }💡 Te hice un repositorio en Github con un ejemplo de trabajo:
Modifiqué la respuesta de flydev para que pueda recargar en caliente los componentes dependientes de i18n sin recargar toda la página. (Actualmente usando en un proyecto mecanografiado)
import { PluginOption } from "vite"; export default function I18nHotReload(): PluginOption { return { name: 'i18n-hot-reload', handleHotUpdate({ file, server }) { if (file.includes('locales') && file.endsWith('.json')) { console.log('Locale file updated') server.ws.send({ type: "custom", event: "locales-update", }); } }, } }Luego agregándolo a los complementos de vite:
plugins: [ ..., i18nHotReload(), ]Y luego agregar el oyente en cualquier lugar al que pueda llegar su código (lo estoy usando en el archivo de configuración inicial i18n)
if (import.meta.hot) { import.meta.hot.on('locales-update', () => { i18n.reloadResources().then(() => { i18n.changeLanguage(i18n.language) }) }) }
i18n.reloadResources()solo no activa la recarga en caliente de las traducciones