Repository navigation
i18next-hmr not re-rendering React components when updating the contents of the translations JSON files #230
Description
Describe the bug
I have setup the i18next config file like so:
import { initReactI18next } from 'react-i18next'
import i18n from 'i18next'
import LanguageDetector from 'i18next-browser-languagedetector'
import { HMRPlugin } from 'i18next-hmr/plugin'
import Backend from 'i18next-http-backend'
const DEFAULT_LANGUAGE = 'en'
let i18nChain = i18n.use(Backend).use(LanguageDetector).use(initReactI18next)
const isDevelopment = process.env.NODE_ENV === 'development'
if (isDevelopment) {
i18nChain = i18nChain.use(
new HMRPlugin({
vite: {
client: true, // enables client side HMR in Vite
},
})
)
}
void i18nChain.init({
// Fallback locale used when a translation is
// missing in the active locale.
fallbackLng: DEFAULT_LANGUAGE,
detection: {
// Only detect from browser, don't use querystring/cookies/etc.
order: ['navigator'],
// Cache detected language in localStorage
caches: ['localStorage'],
},
supportedLngs: ['en'],
load: 'languageOnly',
// Default namespace for app-wide translations
defaultNS: 'common',
// Only preload 'common' namespace; route-specific namespaces load on-demand
ns: ['common'],
// Global fallback: all namespaces fall back to 'common' when a key is missing
fallbackNS: 'common',
// IMPORTANT
react: {
...(isDevelopment ? { bindI18nStore: 'added removed' } : {}),
},
backend: {
// public/locales/...
loadPath: '/locales/{{lng}}/{{ns}}.json',
},
})
export default i18nI need to add the react > bindI18nStore to get the React components to re-render on translations content change in JSON files. This feels like a workaround and I assume I shouldn't need to do this when using i18next-hmr in my Vite config as shown below:
...
...
export default defineConfig(({ mode }) => {
const developmentPlugins = [
i18nextHMRPlugin({
localesDir: 'public/locales',
}),
]
setEnv(mode)
return {
plugins: [
...,
...,
...developmentPlugins,
}
})
...
...
To Reproduce
Steps to reproduce the behavior:
- Change a value in
common.jsontranslations file. - Notice that while the translations are reloaded (console.logs show up for the reloading of translations), the React component does not update to show the updated value.
Expected behavior
UI should update to show the u[dated value.
Reacted by Andreas Bergmaier
Activity
felixmosh commentedon Nov 2, 2025
Hi, I'm working on a daily basis with this lib on Vite & react project. it works ok.
Probably there is some issue with the config.
Can you make a reproducable repo? you can use the Vite example in the examples folder.
[-]i18next-hmr not re-rendering React components on change in translations in the translations file.[/-][+]i18next-hmr not re-rendering React components when updating the contents of the translations JSON files[/+]utksaxena commentedon Nov 3, 2025
Thanks for the prompt response Felix! Will create a reproducible repo. For context, I found the workaround here i18next/react-i18next#1171 (comment)
felixmosh commentedon Nov 3, 2025
BTW, recenlty, I've migrate one of my apps to React Server component, and I saw that these components are not re-render on locale change (and I can't do anything to re-render them.), maybe this is your situation?
ab-pm commentedon Jul 13, 2026
Same issue here.
react: { bindI18nStore: 'added removed' }is required to trigger re-rendering of components with theuseTranslation()hook.felixmosh commentedon Aug 21, 2026
Can you make a reproduction example?
ab-pm commentedon Aug 25, 2026
I think this is just the documented behaviour of react-i18next's
bindI18nStore. The problem is more that their default value is the unexpected one - why would someone not want the hook to re-run when the translation resources change?I'm not sure i18next-hmr can or should change anything here - maybe except adding this as a gotcha to the setup readme.
felixmosh commentedon Aug 25, 2026
This lib can set this value, but I need a way to reproduce, because in my setup, I didn't set it, and it works (maybe I'm using an older version)
felixmosh commentedon Oct 14, 2026
this lib triggers
languageChange(currentLanguage)which emits thelanguageChangedat the end... so when there is any change to the locale.json file, edit, add, delete, it should re-render.Without a reproduction repo, I can't assist further.