next-i18next: `appWithTranslations` HOC is not providing correct `I18nextProvider`

Describe the bug

While I navigate, the page don’t shows the translations but the keys.

Occurs in next-i18next version

8.8.0, and next@10.0.1

Steps to reproduce

I have three pages and my setup is basically the same from this example:

_app.js with export default appWithTranslation(MyApp);;
each page with its own exported getServerSideProps as async ({ locale }) => ({ props: { ...await serverSideTranslations(locale, ['common', 'PAGE_NAME']) } })

Expected behaviour

The pages should load the namespaces and show translations.

OS

OS: Ubuntu 20.04
Browser: Chrome 92.0.4515.159 (Official Build) (64-bit)

Additional context

I added the I18nextProvider to my tree and everything works:

import { useTranslation } from 'next-i18next';
import { I18nextProvider } from 'react-i18next';

const MyApp = ({ Component, pageProps }) => {
  const { i18n } = useTranslation();
  
  return (
    <I18nextProvider i18n={i18n}>
      <App />
    </I18nextProvider>
  );
};
  
export default appWithTranslation(MyApp);

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 5
Comments: 26 (12 by maintainers)

Most upvoted comments

Same here, thank god @basslagter that you suggested reverting to 8.7.0. I have spent 3 hours with this error:

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

@isaachinman No need for a reproducible example. Just create a plain next app (for me with typescript template) and it would not work.

hazzo on Nov 2, 2021

@isaachinman it seems like this occurs (even in 10) when I add getInitialProps on a custom app in _app.js

CustomApp.getInitialProps = (props) => {
  return {
    ...App.getInitialProps(props),
  };
};

export default appWithTranslation(CustomApp);

When I skip CustomApp.getInitialProps = it seems to work. But I need this…

Edit: Okay…it turns out I need to add getServerSideProps to every page to make this work…

export function getServerSideProps() {
  return { props: {} };
}

basslagter on Dec 29, 2021

@belgattitude Explicitly adding “i18next”: “20.6.1” didn’t change anything (according to yarn.lock I was anyhow on 20.6.1 for i18next)

gesabehrends on Oct 18, 2021

@gabsprates few questions cause I’ve been affected (and downgraded to 8.7.0).

Do you import from react-i18next sometimes ? ie: import { useTranslation } from 'react-i18next'; vs import { useTranslation } from 'next-i18next ?
Can you try with those locked deps:

  "dependencies": {
    // Actually if i18next is at v21, I'm able to reproduce the bug you mentionned, 
    // v21 will be installed by latest @types/i18next-fs-backend required by next-i18next
    // By pinning it, maybe it will help resolution, who knows ?
    "i18next": "20.6.1", 
    "next-i18next": "8.8.0",
    "react-i18next": "11.12.0",
  }

Do you have this message in shell console (yarn dev) ?

event - compiled successfully
react-i18next:: You will need to pass in an i18next instance by using initReactI18next
wait  - compiling...`

PS: Asking that because I could partially reproduce when i18next version is > 20 here https://github.com/belgattitude/nextjs-monorepo-example/pull/510. I’ll probably need more time to have a full repro.

belgattitude on Oct 4, 2021