Next-i18next: i18next - notReadyT - react-i18next:: You will need pass in an i18next instance by using initReactI18next

[d3tr1tus]

Hi I want to use in my project translation and I made everythink just like in docs but in console I am getting warn

react-i18next:: You will need pass in an i18next instance by using initReactI18next

and if I log props

i18n: {}
t: ƒ notReadyT(k)
tReady: false

home.ts

export default withTranslation('common')(Home)

i18n.js

const NextI18Next = require('next-i18next').default

const languages = ['de', 'cs']

const NextI18NextInstance = new NextI18Next({
    defaultLanguage: 'en',
    otherLanguages: ['de', 'cs'],
})

NextI18NextInstance.i18n.languages = languages

module.exports = {
    default: NextI18NextInstance,
    withTranslation: NextI18NextInstance.withTranslation,
}

server.js

/* eslint-env node */
/* eslint-disable @typescript-eslint/no-var-requires */
const express = require('express')
const {join} = require('path')
const {parse} = require('url')
const compression = require('compression')
const nextI18NextMiddleware = require('next-i18next/middleware').default

const next = require('next')
require('dotenv').config()

const PORT = process.env.PORT || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({dev})
const handle = app.getRequestHandler()

const i18nextConfig = require('../src/i18n').default

app
    .prepare()
    .then(async () => {
        const server = express()

        if (!dev) server.use(compression())

        await i18nextConfig.initPromise
        server.use(nextI18NextMiddleware(i18nextConfig))

        server.get('*', (req, res) => {
            const parsedUrl = parse(req.url, true)
            const {pathname} = parsedUrl

            // handle GET request to /service-worker.js
            if (pathname === '/service-worker.js') {
                const filePath = join(__dirname, '.next', pathname)

                return app.serveStatic(req, res, filePath)
            } else {
                return handle(req, res, parsedUrl)
            }
        })

        server.listen(PORT, err => {
            if (err) {
                throw err
            }
            console.log('> Ready on http://localhost:' + PORT) // eslint-disable-line no-console
        })
    })
    .catch(ex => {
        console.error(ex.stack)
        process.exit(1)
    })

composer.json

    "start": "NODE_ENV=production node server/index.js",
    "build": "next build",
    "dev": "node server/index.js",

Can someone help me please?

[isaachinman]

You need to wrap your _app. Please follow the docs.

[d3tr1tus]

You are right! When I read docs I had to somehow skip this step. Thank you @isaachinman

[sandrooco]

I'm having this issue too but I properly wrapped it with appWithTranslation.
I'm on next 10.0.7 and next-i18next 8.0.6. Any ideas?

[plevavas]

I'm having this issue too since i have updated react-i18next to 11.8.9 instead of 11.8.8.

[borispoehland]

Having the same issue even though I wrapped my app with the hoc.

[takirami]

Also having this issue, App is wrapped

[KingfishX23]

Same here. anyone tried previous versions?

Update
I've found a fix to my problem. make sure you have the serverSideTranslations in your getServerSideProps (or getStaticProps) with the right locale.

export const getServerSideProps = async (ctx) => {
    try {
        await verifyUserToken(ctx);

        const response = {
            props: {
                ...(await serverSideTranslations(ctx.locale, ['library'])),
            },
        };

        return response;
    } catch (err) {
        const response = {
            redirect: {
                permanent: false,
                destination: '/login',
            },
            props: {},
        };

        return response;
    }
};

Additional Info
To fix most of the problems (such as this one, ReactDOMServer does not yet support Suspense, etc.),
MAKE SURE there are no other errors in your getServerSide/StaticProps and MAKE SURE you use the serverSideTranslations. For me, i had an undeclared object in props that causes error

props: {
   cookies, //This has not been declared in the getServerSideProps function, causing error!
}

[axelity]

I encountered the same issue until I realized I have forgotten to insert the following code on the page. Have a look in the simple example of this project, too. It is also mentioned in the READ.ME, but I was confused because of the title "serverSideTranslation", so I skipped reading this important part. BTW, it works with the latest versions of Next.JS (10.0.8) and next-i18next (8.1.1).

Insert this code and add the names of your locale files to the array. It seems the default must have the name 'common.json'

import { serverSideTranslations } from 'next-i18next/serverSideTranslations'

// add your functional component here and don't forget to export it

export const getStaticProps = async ({ locale }) => ({
  props: {<br/>
    ...await serverSideTranslations(locale, ['common']),  
  },  
})

[Shariaty]

Despite wrapping _app, I receive react-i18next:: You will need to pass in an i18next instance by using initReactI18next
On the bottom of my _app.js file I do
export default wrapper.withRedux(appWithTranslation(MyApp));
However, I receive the above mentioned warning and the useTranslation returns NotReady
next Version : 10.0.9,
next-i18next Version : 8.1.2