i18n keeps giving me errors when loading

[adharbert]

Describe the bug I've tried multiple ways to set this up, I cannot get the application to start, I constantly get the following error:

./src/index.js Module not found: Can't resolve './i18n' in 'D:\localization\my-app\src'

Occurs in react-i18next version "react-i18next": "^11.2.2", "i18next": "^19.0.1", "i18next-browser-languagedetector": "^4.0.1", "i18next-xhr-backend": "^3.2.2",

To Reproduce Steps to reproduce the behavior:

1. create-react-app my-app
2. cd my-app
3. npm i --save i18next i18next-xhr-backend i18next-browser-languagedetector react-i18next 4 ---- Basically followed the instructions in this: https://react.i18next.com/guides/quick-start
4. Receive error when run app ( npm start )

Expected behaviour To have the app run without crashing.

Screenshots If applicable, add screenshots or a GIF to help explain your problem.

OS (please complete the following information):

• Windows 10 1809 v

• Device: [e.g. MBP 2018 13"]

• Chrome Version 78.0.3904.108 (Official Build) (64-bit)

[jamuhl]

Just recheck everything...this is not related to react-i18next...did you create that ./i18n.js file? --> It's importing a own file...so how should that be an issue with this module?

[adharbert]

yes, Here is the code from i18n.js

import i18n from 'i18next';
//import i18n from 'i18n';
import { initReactI18next } from 'react-i18next';

import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
// not like to use this?
// have a look at the Quick start guide 
// for passing in lng and translations on init

i18n
  // load translation using xhr -> see /public/locales
  // learn more: https://github.com/i18next/i18next-xhr-backend
  .use(Backend)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    fallbackLng: 'en',
    debug: true,

    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    }
  });

export default i18n;

I am using create-react-app for the application. Here is my dependencies in my package.json

  "dependencies": {
    "i18n": "^0.8.4",
    "i18next": "^19.0.1",
    "i18next-browser-languagedetector": "^4.0.1",
    "i18next-xhr-backend": "^3.2.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-i18next": "^11.2.2",
    "react-scripts": "3.2.0"
  },

Here is the code from index.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import App from './App';
import * as serviceWorker from './serviceWorker';

// import i18n (needs to be bundled ;)) 
import './i18n';

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

And this is the App.js code

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { withTranslation } from 'react-i18next';

function App({ t }) {

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Edit <code>src/App.js</code> and save to reload.</p>
        <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" >Learn React</a>
      </header>
      <h1>{t('Welcome to React')}</h1>
    </div>
  );
}

export default withTranslation()(App);

I'm keeping it very basic, if I remove the reference to the './i18n' in my index.js file, then this works fine, I'm not sure why the i18n.js file is causing this issue. I'm guessing there is something obvious I'm missing here.

[jamuhl]

try recreating this on codesandbox....rather sure it works there...must be something "not" so obvious...a typo somewhere (as on the first look it's the same as: https://github.com/i18next/react-i18next/tree/master/example/react/src (which works)