I've created a React application with create-react-app
I want to implement translations and I've discovered react-i18next
After installing required packages I've setup my i18n.js config file:
import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import XHR from 'i18next-xhr-backend';
i18n
.use(XHR)
.use(LanguageDetector)
.init({
debug: true,
lng: 'en',
nsSeparator: false,
keySeparator: false,
fallbackLng: false,
backend: {
loadPath: 'locales/{{lng}}/{{ns}}.json'
}
});
export default i18n;
I'm getting this error: i18next::backendConnector: loading namespace translation for language en failed failed parsing locales/en/translation.json to json
It happens because webpack doesn't find the json file and is returning the index.html file contents instead:
I'm not sure where you put the locale files, but I see two issues:
You have specified a relative URL so you load
/kiosk/parents/locales
rather than/locales
. You need to add a slash at the beginning of the load path.For Create React App to serve static files, you need to put them into the
public
folder. This is described in its User Guide in more detail. So make surelocales
is inside thepublic
folder in the project root.
Hope this helps!
来源:https://stackoverflow.com/questions/43898155/react-i18next-not-loading-json-translation-files-in-react-app-created-with-creat