Converting from react-intl to react-i18next

1

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!

2 Likes
2

interesting news @Lemeri123 , thanks. For the error your are encountering, sharing details on the error, ie. screenshots can be helpful in trouble shooting

1 Like
3

@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 ?

1 Like
4

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!

2 Likes
5

image
image1915×978 67.5 KB

This is the error am encountering

6

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

7

So @aditya basically what you mean is I should recreate the containers to rebuild the frontend with the updated package.json and node_modules??.

8

no you have to rebuild the fronted-imgae-using Dockerfile preasent for frontent and use that image inside dev.docker-compose.yml! file