react-i18next:: You will need to pass in an i18next instance by using initReactI18next when running build when there is translation in top level layout

🐛 Bug Report

This is only happening when I run build script and my layout call useTranslation hook

To Reproduce

A small repo to reproduce

• clone the repo, install deps
• run pnmp run build you’ll see the warning

This is the only place I call useTranslation hook

// My _app.tsx
import "../styles/globals.css";
import type { AppProps } from "next/app";
import { appWithTranslation, useTranslation } from "next-i18next";
import React from "react";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const { t } = useTranslation();

  return (
    <div>
      <div>{t("hello-world")}</div>
      {children}
    </div>
  );
};

export default appWithTranslation(MyApp);

my only page is pages/index.tsx

and I already called the serverSideTranslation

export async function getStaticProps({ locale }: any) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ["common"])),
    },
  };
}

the translation is working, and I believe as mentioned here https://github.com/i18next/next-i18next/issues/1840#issuecomment-1145614232

the only issue is that there are warnings happen when running build

Expected behavior

There’s no warning that says react-i18next:: You will need to pass in an i18next instance by using initReactI18next when running build script

Your Environment

• runtime version: node v16.13.2,
• next-i18next version: v11.3.0
• os: Windows
• next: latest

[belgattitude]

Update: v13.0.0 is released and might partially fix this issue by moving i18next, react-i18next to peer-deps.

• Release notes: https://github.com/i18next/next-i18next/releases/tag/v13.0.0
• Upgrading: https://github.com/i18next/next-i18next/blob/master/UPGRADING.md

There’s a new TROUBLESHOOT document to help with installation, specifically: You will need to pass in an i18next instance

If you experienced issues before, could you try v13.0.0 and let me know ?

PS: I’m planning to tackle the dual packaging hazards in the upcoming weeks.

[adrai]

Then probably we have to live with that warning… The problem is, during build, the Layout component is rendered also if i18next is not initialized yet and not ready…

If you do this, you’ll see what I mean. But I honestly have no idea how to prevent this in next.js, sorry.

const { t, ready } = useTranslation()
console.log(ready)
console.log(t('hello-world'))