[error/warning]: You will need pass in an i18next instance by using initReactI18next

Sorry to bother, I posted this question first on SO

I am using i18next and react, and locally it works as expected, but when I deploy on Surge I always get this error: react-i18next:: You will need pass in an i18next instance by using initReactI18next

They way I implemented it is almost identical to the react-i18next documentation.

main.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import 'tabler-react/dist/Tabler.css'
import { BrowserRouter as Router } from 'react-router-dom'
import App from './App/container'
import i18next from './services/app/i18n'
// import './services/app/i18n' /* eslint-disable-line no-unused-vars */

import initStore from './initStore'

import '../sass/style.scss'
import 'dropzone/dist/dropzone.css'
import 'c3/c3.css'

const store = initStore()

// console.log('i18next', i18next) // if I uncomment this, it works on test server

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>,
  document.getElementById('root'),
)

services/app/i18n.js

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import Fetch from 'i18next-fetch-backend'

import * as apiConfig from '../../../config/api'

import { transformTranslationsData } from './translation-helpers'

const apiEnv = apiConfig[API_ENV]


i18n
  .use(Fetch)
  .use(initReactI18next)
  .init({
    // debug: true,
    lng: 'en',
    keySeparator: false,
    fallbackLng: {
      default: [ 'en' ],
    },
    interpolation: {
      escapeValue: false, // react already safes from xss
    },
    react: {
      // wait: true,
      useSuspense: false,
    },
    backend: {
      loadPath: `${apiEnv.api}/translations?limit=0&locale={{lng}}&key=cm.*`,
      allowMultiLoading: true,
      parse: transformTranslationsData,
    },
  })

export default i18n

The thing I don’t understand is that when I console.log the i18next variable in main.jsx, it prints out the initialised object, and it works when deployed. If I don’t log it, it just shows the error and the translations are not available in the app.

I am using these versions:

    "i18next": "^15.1.0",
    "i18next-fetch-backend": "^2.2.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-i18next": "^10.9.0",

It is going to be tricky for me to make a small repo that reproduces this error. For now I am hoping on clues and suggestions so I can investigate further.

[chrisfinch]

For getting rid of Jest warnings easier than modifying components themselves:

jest.mock('react-i18next', () => ({
  useTranslation: () => ({t: key => key})
}));

[rogger-frogger]

Can someone explain where (which file) we need to write 👇

jest.mock('react-i18next', () => ({
  useTranslation: () => ({t: key => key})
}));

Do we need to have it within our test.js file or component.js file?

You can place it at the top of the file right after file imports and before the describe block