i18next-xhr-backend | can be | HTTP library

Probably you need to use Switch from "react-router" package instead of "react-router-transition-switch".

I think your json missing the translation key work like this:

Those translation files will be served from the base path from where your index.html is also loaded and in-case it's an app created using create-react-app, that folder is public.

So I think when you are saying in loadPath that load files from ./translations/{{lng}}/common.json, the request actually gets resolved to public/translation/en/common.json but your files are located at src..... as you stated.

You can try either moving those files inside public (check this example for reference also ) or you can try the other syntax where you explicitly import the json from each file (inside src) and add it to a resources object which you pass to configuration as shown here

This is a problem with react-table v7.0.1, upgrading to v7.0.2 fixes the problem.

It's a minification bug. Here is the exact commit that fixed the problem.

From the Changelog :

7.0.2

• Fixed an issue where the internal flexRenderer would not work correctly in production due to the strangest friggin' minification bug I've ever encountered. 🤷‍♂️

I had the exact same issue. Turned out that Webpack would mess around with Material UI's rules of JSS precedence. You need to manually override the injection order using the index option.

In your makeStyles() or withStyles(), add {index: 1}:

Deleted package.json entries with i18next.
Deleted all node_modules folder
Reinstalled npm install
npm install react-i18next i18next --save // when like to detect user language and load translation
npm install i18next-http-backend i18next-browser-languagedetector --save

This solved my problem.

All resource files should store strings under translation key (like in quick start for react-i18next):

I was using create-react-app + JSX, so i had to open two terminals one for npm start (on port 3000 for react server) and one for node server.js (for backend on port 4000) and these two are connect through the proxy that i had on my package.json. when i have finished with development, all i had to do was:

1. remove the proxy from package.json.

2. npm run build, which makes a copy of all my code into the build folder.

3. app.use("/", express.static("build")); in my server.js file to make the build folder accessible to app.

4. app.all("/*", (req, res) => { res.sendFile(__dirname + "/build/index.html"); }); at the end of the server.js to catch all.

hope this saves some of your time.

The import from react-i18next is wrong. It should be

import { initReactI18next } from "react-i18next"

and

.use(initReactI18next)

If you attempt to import something that is not exported the value is undefined and then use gives you the message you're seeing.

It seems to have been called reactI18nextModule in an earlier version of react-i18next which is why you can find tutorials using it.

I made a demonstration of the exports in RunKit