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

Question

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

I recently added the package and got this error. I have followed all the steps as far as I know.

I use Next.js with the next-i18next package which usually initialises itself automatically.

juliomalves · Accepted Answer · 2021-06-27T23:59:18.760

27

From the next-i18next docs:

Then we add serverSideTranslation to getStaticProps or getServerSideProps (depending on your case) in our page-level components.

Meaning you'll need to add serverSideTranslation to the pages that need translations.

For example in your pages/d/[tab]/index file:

import Head from 'next/head';
import { Input } from '../../../components/Input';
import YouTube from '../../../components/youtube/Main';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

const index = () => {
    return (
        <>
            <Head>
                <title>YouTube</title>
            </Head>
            <YouTube />
        </>
    );
};

export const getServerSideProps = async ({ locale }) => ({
    props: {
        ...(await serverSideTranslations(locale, ['common']))
    }
});

export default index;

Then further down in your Main component you can access the documentation translation using:

t('pages.documentation')

edited Jun 27 '21 at 23:59

answered Jun 09 '21 at 20:20

juliomalves

42,130
20
150
146

6

This didn't work for me until I added `react: { useSuspense: false }` to my `next-i18next-config.js` file. – Angus Ryer Jul 10 '21 at 03:04
how about the case when using getStaticProps in dynamic pages – Bryan Lumbantobing Mar 24 '22 at 12:28
@BryanLumbantobing Same applies to `getStaticProps`. – juliomalves Mar 24 '22 at 14:01
well on dynamic pages. when we use `getStaticProps`, we need to pass getStaticPaths as well, what would be thrown inside `getStaticPaths` in this case ? – Bryan Lumbantobing Mar 26 '22 at 17:21
Nothing needs to change in `getStaticPaths`, that's only used to define what paths needs to be generated at build time. – juliomalves Mar 26 '22 at 17:23
There's also a nice blog post here: https://locize.com/blog/next-i18next/ – adrai Jun 21 '22 at 08:35
`serverSideTranslations` isn't there anymore and not mentioned in the starting up guide... – OZZIE Mar 27 '23 at 12:17

score 12 · Answer 2 · answered Mar 14 '23 at 16:26

12

In my case the problem was a silly typo caused by the VSC import suggestions and at first place my carelessness.

So instead of:

import { useTranslation } from "next-i18next";

... the import statement was:

~~import { useTranslation } from "react-i18next";~~

answered Mar 14 '23 at 16:26

pa4080

531
9
16

You saved my day! thanks – Yaman Abd Aug 23 '23 at 22:15

score 7 · Answer 3 · answered Sep 24 '21 at 07:33

7

update next-i18next.config.js

module.exports = {
    i18n: {
        defaultLocale: 'en',
        locales: ['en', 'de', 'fr'],
    },
    react: { useSuspense: false },//this line
};

answered Sep 24 '21 at 07:33

Aayush Bhattacharya

1,628
18
17

1

Be aware that all the strings ids will appear (like "common/something"), till the translations is loaded if you turned this off. This is more noticable in case the translations are coming from the backend. – omzer Sep 27 '21 at 18:37
1

This did not work – Stephane Jan 27 '22 at 20:49
1

not work for me either. this is happening to me only on nextjs dynamic page `/[id]/edit` – Bryan Lumbantobing Mar 24 '22 at 12:21
It is not working for me either. – Dhia Shalabi Apr 10 '23 at 17:15

score 0 · Answer 4 · answered Oct 26 '22 at 21:10

This error message may be shown although it is not the root cause of the problem.

I had the following build error message:

react-i18next:: You will need to pass in an i18next instance by using initReactI18next
TypeError: Cannot read properties of undefined (reading 'split')
    at LanguageSwitcherLink ...

The root cause here was the TypeError.

In my case, the TypeError occurred because I had components with parameters in pages directory. Thus, during next build these components were attempted to be build as static pages. This failed because expected parameters were missing, which is why they were undefined.

Solution for me: move components outside of pages folder. Afterwards, there is also no error message anymore with respect to initReactI18next.

My components are not in pages folder but I get these errors. — newguy, Mar 17 '23 at 02:20

Sohaib El Mediouni · Answer 5 · 2023-08-13T15:10:58.823

Try this : in your next-i18next.config.js:

    const path = require('path')
module.exports = {
    i18n: {
        defaultLocale: 'fr',
        locales: ['en', 'fr'],
        localePath: path.resolve('./public/locales')
    },
};

and in your _app.js try to pass the config file as a sencond param like this :

import { appWithTranslation } from 'next-i18next'
import nextI18NextConfig from '../../next-i18next.config'
....
export default appWithTranslation(MyApp, nextI18NextConfig);

N.B if you are using Next.js's dynamic import feature to load a module only on the client side disable it otherwise it will not work

export default dynamic(() => Promise.resolve(index), { ssr: false }); //to be removed

score 0 · Answer 6 · answered Aug 21 '23 at 10:40

0

Had the same issue, problem was that I wasn't importing the i18n.js file in app.js. Check and make sure you are importing this file correctly in your app.

answered Aug 21 '23 at 10:40

Jordan

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Itay Wolfish Aug 24 '23 at 09:36

score -1 · Answer 7 · answered Aug 14 '22 at 17:59

-1

I had this issue too.

But I had "revalidate" property in getStaticProps. When I removed it, the error went away.

P.S. Maybe this will help someone

answered Aug 14 '22 at 17:59

Serafim

353
3
10

what if we need the revalidation too? – zahra shahrouzi Feb 25 '23 at 15:13

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

7 Answers7

update next-i18next.config.js

Linked