# Converting from react-intl to react-i18next
**URL:** https://talk.openelis-global.org/t/converting-from-react-intl-to-react-i18next/1584
**Category:** Uncategorized
**Created:** [June 25, 2025, 2:35pm UTC](https://talk.openelis-global.org/t/converting-from-react-intl-to-react-i18next/1584 "2025-06-25T14:35:59Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@Lemeri123](https://talk.openelis-global.org/u/Lemeri123)
#### Post date: [June 25, 2025, 2:35pm UTC](https://talk.openelis-global.org/t/converting-from-react-intl-to-react-i18next/1584/1 "2025-06-25T14:35:59Z")
We are migrating our internationalization (i18n) setup from **`react-intl`** to **`react-i18next`** to load translations dynamically. The goal is to;
1. Replace `FormattedMessage`, `useIntl`, and `IntlProvider` with `react-i18next`’s `useTranslation` hook and `I18nextProvider`.
2. Load translations dynamically (previously hardcoded JSON imports).
3. Maintain existing translation keys
### **Progress**
1. Created a react-i8next (i18n.js) file to handle the configurations
2. Converted App.js to align and use react-i18next and replaced all react-intl instances
### **Current Blocker**
Despite installing the required dependencies (`i18next`, `react-i18next`, `i18next-browser-languagedetector`), I am encountering:
Uncaught Error: Cannot find module ‘i18next-browser-languagedetector’
and this results into nothing being displayed on the browser
The error persists even after verifying the package is installed (`npm list` confirms it exists in `node_modules`).
**Thanks in advance for your help!**
---
### Author:  [@tasksolver](https://talk.openelis-global.org/u/tasksolver)
#### Post date: [June 25, 2025, 5:03pm UTC](https://talk.openelis-global.org/t/converting-from-react-intl-to-react-i18next/1584/2 "2025-06-25T17:03:04Z")
interesting news @Lemeri123 , thanks. For the error your are encountering, sharing details on the error, ie. screenshots can be helpful in trouble shooting
---
### Author:  [@Agaba\_Derrick\_Junior](https://talk.openelis-global.org/u/Agaba_Derrick_Junior)
#### Post date: [June 26, 2025, 6:10am UTC](https://talk.openelis-global.org/t/converting-from-react-intl-to-react-i18next/1584/3 "2025-06-26T06:10:45Z")
> [@Lemeri123](#):
>
> We are migrating our internationalization (i18n) setup from **`react-intl`** to **`react-i18next`** to load translations dynamically. The goal is to;
>
> 1. Replace `FormattedMessage`, `useIntl`, and `IntlProvider` with `react-i18next`’s `useTranslation` hook and `I18nextProvider`.
> 2. Load translations dynamically (previously hardcoded JSON imports).
> 3. Maintain existing translation keys
>
> ### **Progress**
>
> 1. Created a react-i8next (i18n.js) file to handle the configurations
> 2. Converted App.js to align and use react-i18next and replaced all react-intl instances
>
> ### **Current Blocker**
>
> Despite installing the required dependencies (`i18next`, `react-i18next`, `i18next-browser-languagedetector`), I am encountering:
> Uncaught Error: Cannot find module ‘i18next-browser-languagedetector’
> and this results into nothing being displayed on the browser
>
> The error persists even after verifying the package is installed (`npm list` confirms it exists in `node_modules`).
>
> **Thanks in advance for your help!**
@Lemeri123 A couple of days I checked about this and I thought we had created an issue about it, am glad its up now
I’m hoping that our import is something like `import LanguageDetector from 'i18next-browser-languagedetector';`
otherwise are we able to have the logs for the error ?
---
### Author:  [@aditya](https://talk.openelis-global.org/u/aditya)
#### Post date: [June 26, 2025, 6:45am UTC](https://talk.openelis-global.org/t/converting-from-react-intl-to-react-i18next/1584/4 "2025-06-26T06:45:18Z")
> [@Lemeri123](#):
>
> ### **Current Blocker**
>
> Despite installing the required dependencies (`i18next`, `react-i18next`, `i18next-browser-languagedetector`), I am encountering:
> Uncaught Error: Cannot find module ‘i18next-browser-languagedetector’
> and this results into nothing being displayed on the browser
>
> The error persists even after verifying the package is installed (`npm list` confirms it exists in `node_modules`).
This issue you’re facing is because the frontend is running inside docker and inside docker you latest package.json doesn’t goes in!
You have to manually build the frontend IMAGE locally first and use that image as a container, and after that, only you will be able to test `i18-lang-interpretor`!
---
### Author:  [@Lemeri123](https://talk.openelis-global.org/u/Lemeri123)
#### Post date: [June 26, 2025, 7:03am UTC](https://talk.openelis-global.org/t/converting-from-react-intl-to-react-i18next/1584/5 "2025-06-26T07:03:56Z")
This is the error am encountering
---
### Author:  [@Lemeri123](https://talk.openelis-global.org/u/Lemeri123)
#### Post date: [June 26, 2025, 7:06am UTC](https://talk.openelis-global.org/t/converting-from-react-intl-to-react-i18next/1584/6 "2025-06-26T07:06:22Z")
Oh yes most certainly @Agaba_Derrick_Junior. That is the import and as for the logs of the error, they are provided in the screenshot I provided
---
### Author:  [@Lemeri123](https://talk.openelis-global.org/u/Lemeri123)
#### Post date: [June 26, 2025, 7:14am UTC](https://talk.openelis-global.org/t/converting-from-react-intl-to-react-i18next/1584/7 "2025-06-26T07:14:54Z")
So @aditya basically what you mean is I should recreate the containers to rebuild the frontend with the updated `package.json` and `node_modules`??.
---
### Author:  [@aditya](https://talk.openelis-global.org/u/aditya)
#### Post date: [June 26, 2025, 11:21am UTC](https://talk.openelis-global.org/t/converting-from-react-intl-to-react-i18next/1584/8 "2025-06-26T11:21:21Z")
no you have to rebuild the fronted-imgae-using Dockerfile preasent for frontent and use that image inside dev.docker-compose.yml! file
---
### Author:  [@Lemeri123](https://talk.openelis-global.org/u/Lemeri123)
#### Post date: [July 2, 2025, 9:06am UTC](https://talk.openelis-global.org/t/converting-from-react-intl-to-react-i18next/1584/9 "2025-07-02T09:06:02Z")
So far, React-i18next has been successfully initialized and working fine.
**`i18next: initialized`**
Means i18next successfully started with the config file.
**`i18next: languageChanged es`**
i18next successfully switched to Spanish (es), showing the language detector and system are both working.
Thanks everyone