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

[bryanltobing]

🐛 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 #1840 (comment)

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

[adrai]

Try to move the Layout component to a different file.

[adrai]

serverSideTranslations should be in the same file where useTranslation is used, isn't it?

[bryanltobing]

Try to move the Layout component to a different file.

I used it in a different file when the warning happens. I moved it to _app.tsx just to make it easier to visualize, and I'm not sure there's a difference, it's just a component definition.

serverSideTranslations should be in the same file where useTranslation is used, isn't it?

not necessarily I think #1840 (comment)
since nextjs layout can't call serverSideTranslations in its own file

how next handle layout https://nextjs.org/docs/basic-features/layouts

[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'))

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[yuuk]

Did you resolve this problem?

[bryanltobing]

not stale

[bryanltobing]

@yuuk I didn't

[martinjlowm]

I'm experiencing the same thing. For me it seems like an issue with bundling (by debugging stack traces) where the useTranslate context loses its reference. In this scenario, the provider is created in the environment of the Node.js process (non-bundle) and some translation attempts made afterwards are successful within that same environment. Suddenly, React tries to render a bundled version of the module and the knowledge about the context is lost.

I happen to have layout components (in which this problem occurs) in a separate package and I think it's simply a Webpack misconfiguration on my end.

edit: I upgraded Next.js from 10 to 12 and that resolved it for me. I now use Webpack 5 as well.

[martinjlowm]

Figured out why. It's because react-i18next is listed as a regular dependency and not a peer dependency. Using pnpm/yarn 2/3 introduces this issue. I can see from previous issues that it seems to be intended, but I would disagree. Forking the project for now to fix it in my case.

[adrai]

Maybe just defining react-i18next in your dependencies will work for you? Then there's no need for a fork.

[martinjlowm]

Already have, however, the module resolution in a symlink setup does not function well in this case.

diff --git a/package.json b/package.json
index 02388f7e443548dc6e428429719346293099412c..cc1169a110b2b1cb53e81d78837cfec7a69570a3 100644
--- a/package.json
+++ b/package.json
@@ -130,12 +130,12 @@
     "core-js": "^3",
     "hoist-non-react-statics": "^3.3.2",
     "i18next": "^21.9.1",
-    "i18next-fs-backend": "^1.1.5",
-    "react-i18next": "^11.18.4"
+    "i18next-fs-backend": "^1.1.5"
   },
   "peerDependencies": {
     "next": ">= 10.0.0",
-    "react": ">= 16.8.0"
+    "react": ">= 16.8.0",
+    "react-i18next": "^11.18.4"
   },
   "resolutions": {
     "i18next": ">=21.8.14",

Have this patch if anyone's facing the same problem.

---

Well, turns out I was too quick to come to a conclusion. Pretty sure it works in development, but production builds would still fail. The server-bundle still has next-i18next references and will therefore continue to reference a different instance of react-i18next. I'm not entirely sure about PNPM internals, but even with the patch above and using https://pnpm.io/cli/patch, react-i18next would still be linked in the dependencies.

My workaround now is to transpile next-i18next and use resolve alias to force the same module instance:

const withNextTranspileModules = require('next-transpile-modules')(['next-i18next'], {
  resolveSymlinks: true,
  debug: false,
});

and

config.resolve.alias = config.resolve.alias || {};
config.resolve.alias['react-i18next'] = path.dirname(require.resolve('react-i18next/package.json'));

[bojackhorseman0309]

I have the same problem but on a completely static next export project. I got the warning when running it and when building it, even though it works perfectly. I followed the SSG example and it works fine just with that error. It happens only on my header which is in my layout, exactly what happened to the OP. It obviously has to due to the fact that it is outside of <Component> but since you can't really getStaticProps on a regular component I guess that's it.

Haven't found a solution yet but not worrying for now since I don't see any bugs, but worried that something might happen in the future lol.

Using NextJS 12.2.5 and next-i18next on 12.0.0.

[rikkit]

I think I'm getting the same problem, with Yarn 3 and PnP. My scenario is I have a NextJS app and a component library built with react-i18next and packaged separately - same as @martinjlowm. next-i18next works fine for NextJS pages, but components from my package don't seem to find the I18NextProvider and I get react-i18next:: You will need to pass in an i18next instance by using i18nextReactModule in my console.

Unfortunately I couldn't get @martinjlowm 's workaround to work for me, I got Critical dependency: the request of a dependency is an expression from i18next-node-fs-backend (maybe related i18next/i18next-node-fs-backend#228)

[adrai]

I think I'm getting the same problem, with Yarn 3 and PnP. My scenario is I have a NextJS app and a component library built with react-i18next and packaged separately - same as @martinjlowm. next-i18next works fine for NextJS pages, but components from my package don't seem to find the I18NextProvider and I get react-i18next:: You will need to pass in an i18next instance by using i18nextReactModule in my console.

Unfortunately I couldn't get @martinjlowm 's workaround to work for me, I got Critical dependency: the request of a dependency is an expression from i18next-node-fs-backend (maybe related i18next/i18next-node-fs-backend#228)

i18next-node-fs-backend is deprecated and replaced by i18next-fs-backend... make sure you have updated all i18next dependencies first

[rikkit]

I shouldn't have written that context in the message, it's distracting. The error came from the workaround.

@adrai can you comment on the workflow where second package uses react-i18next? How should that instance be initialised?

[adrai]

I shouldn't have written that context in the message, it's distracting. The error came from the workaround.

@adrai can you comment on the workflow where second package uses react-i18next? How should that instance be initialised?

Can you create a minimal reproducible example that really differs from the one above?

[rikkit]

It's the exact same as the original post, except that Layout is in a separate package, and using Yarn with PnP to install the package.

[adrai]

It's the exact same as the original post, except that Layout is in a separate package, and using Yarn with PnP to install the package.

#1917 (comment)

[rikkit]

So I went ahead and forked the project, changed i18next and react-i18next to be peer dependencies, and published it: @rikkilt/next-i18next

react-l18next 's I18NextProvider is now initialised as expected and the components in my library are getting translated.

It seems in order to support Yarn PnP, i18next and react-i18next need to be peer dependencies.

[adrai]

So I went ahead and forked the project, changed i18next and react-i18next to be peer dependencies, and published it: @rikkilt/next-i18next

react-l18next 's I18NextProvider is now initialised as expected and the components in my library are getting translated.

It seems to support Yarn PnP that's what's required - move i18next and react-i18next to be peer dependencies.

If this is ok for all, and there is no other negative impact, I'm ready to accept a PR and create a new release.

Please let me know...

[rikkit]

The only downside I can see is that people will have to install react-i18next and i18next separately:

yarn add next-i18next react-i18next i18next 

Otherwise there should be no functional differences (for non PnP users)

I'll make a PR soon and see if there are any docs that need to be updated in the repo 👍

[adrai]

The only downside I can see is that people will have to install react-i18next and i18next separately:

yarn add next-i18next react-i18next i18next 

Otherwise there should be no functional differences (for non PnP users)

I'll make a PR soon and see if there are any docs that need to be updated in the repo 👍

This will probably still be an issue in production: #1917 (comment)

[rikkit]

@adrai I've deployed my app with my forked package to Vercel ("production mode"), and it's working as expected. So I've sent a PR. 👍

I think the problem in the comment you linked relates to pnpm patching (which I don't know about).

[adrai]

@martinjlowm @bryantobing12 can you confirm?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[belgattitude]

Just dropping a note for pnpm users.

In theory you might face You will need to pass in an i18next instance... if multiple versions of react-i18next are present in your install. (Ensure the context is initialized by the same lib)

From pnpm v7.29.0, pnpm allows deduping peer dependents via config (default in v8)

As a side note yarn 2+ does it already, see an example where the direct import of react-i18ext rather than next-i18next works belgattitude/nextjs-monorepo-example#3558).

On pnpm 7.30.3 this config works pretty well.

# .npmrc / https://pnpm.io/next/npmrc 
strict-peer-dependencies=false
auto-install-peers=false

# Will be default in v8.0.0
use-lockfile-v6=true
dedupe-peer-dependents=true
resolve-peers-from-workspace-root=true

PS Most will be the default for the upcoming 8.0.0 (in rc.1 as of today).

That said a re-install if often needed (ie: nuke node modules + optionally remove pnpm-lock.yaml or run pnpm dedupe builtin from 7.23.0).

This should make the solution with imports optional (ie: #1917 (comment)). This matters for 2 reasons

• In nextjs 13 app directory (beta), no need for next-i18next => https://github.com/i18next/next-13-app-dir-i18next-example
• It works if you share localized components between multiple frameworks (ie: remix, nextjs...)

I would appreciate if someone could confirm. Theory vs in practice 😄

PS: added some obscure notes here https://github.com/i18next/next-i18next/blob/master/TROUBLESHOOT.md#how-to-debug-installation

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[vitoropereira]

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

I got the same error and still can't fix it.

[belgattitude]

Package manager and version ? Your package.json can help also. Even just with i18next related deps. Thanks

[vitoropereira]

Package manager and version ? Your package.json can help also. Even just with i18next related deps. Thanks

If you want more details just let me know.

[belgattitude]

The package manager you use ? Pnpm, yarn, npm ? And version ?

[ricoxor]

Hello I have the same issue when I build.

I'm using next-i18next & next 13

Here is my dependencies :

"eslint": "8.40.0",
"eslint-config-next": "13.4.2",
"next": "13.4.3",
"next-i18next": "^13.2.2",
"postcss": "8.4.23",
"qs": "^6.11.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.8.0",
"react-player": "^2.12.0",
"react-slick": "^0.29.0",

The issue occur on my page /src/pages/game/[name].jsx
On the top of the page I added this :

const path = useRouter().asPath;
const { t, ready } = useTranslation()
console.log(ready, t('play'), path)

Here is the console logs when I build :

[    ] - info Generating static pages (0/14)react-i18next:: You will need to pass in an i18next instance by using initReactI18next
false play /game/[name]
[ERROR MESSAGR]
true JOUER /game/game1
true JOUER /game/game2
true JOUER /game/game3 
...

Eveything is working in dev.

How can I fix this issue please?
Thank you in advance

[vitoropereira]

The package manager you use ? Pnpm, yarn, npm ? And version ?

I'm using npm version 8.19.2.
In production it is working ok. I went to update another area of ​​the system and I can no longer deploy because of this error.
The website is https://www.smartmeet.digital

[vitoropereira]

I just fixed the error. I had to put these versions:
"react-i18next": "^12.2.0", "i18next": "^22.4.10",

[belgattitude]

Nice. Can you give the output of 'npm why -r react-i18next i18next'

And then let me know if you're importing useTranslation from react-i18next or from next-i18next ?

[vitoropereira]

npm why -r react-i18next i18next

Remembering that these data are with the application working correctly. If you want, I can go back to the previous state, with a bug, and redo what you requested. And I do importging the useTranslation from "next-i18next".

[belgattitude]

data are with the application working correctly

Just to confirm, to make it work you've downgraded versions right ? Or I miss something cause it looks fine.

If you want, I can go back to the previous state

Yes that would be interesting for me to be sure about what I wrote in the https://github.com/i18next/next-i18next/blob/master/TROUBLESHOOT.md#how-to-debug-installation. I've tested yarn and pnpm but not yet npm. And this might be related to your error message as well

[vitoropereira]

Just to confirm, to make it work you've downgraded versions right ? Or I miss something cause it looks fine.

Yes. I made the downgraded.

Yes that would be interesting for me to be sure about what I wrote in the https://github.com/i18next/next-i18next/blob/master/TROUBLESHOOT.md#how-to-debug-installation. I've tested yarn and pnpm but not yet npm. And this might be related to your error message as well

I don't know why but when updating the version to "react-i18next": "^12.3.1", "i18next": "^22.5.0", "next-i18next": "^13.2.2", now it just appears the alert:
Generating static pages (0/34)react-i18next:: You will need to pass in an i18next instance by using initReactI18next
react-i18next:: You will need to pass in an i18next instance by using initReactI18next.

But it doesn't give an error when building. And then the system is not working anymore. If you look at https://www.smartmeet.digital you will see that.

Can you give the output of 'npm why -r react-i18next i18next'

After updade the version...

Now I'm going to try to get it working again, just local. If I get it I'll get back to you here.

[belgattitude]

Could you try to run

npm dedupe
npx -y rimraf --glob '**/node_modules'
npm install

And see if the see if the problem persist. I would be very grateful 🙏

And if it doesn't I'll try to reproduce

Thanks a lot

[vitoropereira]

Here is the sequence of the test I did now:
First my package.json.

After I run:
npm why -r react-i18next i18next

Then...
npm dedupe

npx -y rimraf --glob '**/node_modules'

npm install

Perhaps the error is in some configuration. Then here's some other data:

Part of _app.jsx

So far the application is with the bug. It's not working properly.

[belgattitude]

Thank you so much... Can I ask you 2 more things:

1. Pass the next-i18next.config in appWithTranslation

// _app.tsx
import type { AppProps } from 'next/app'
import { appWithTranslation } from 'next-i18next'
import nextI18NextConfig from '../next-i18next.config'
const MyApp = ({ Component, pageProps }: AppProps) => (
  <Component {...pageProps} />
)
export default appWithTranslation(MyApp, nextI18NextConfig)

2. In AboutUs, same idea

import nextI18nextConfig from '../../next-i18next.config'
//...
   ...(await serverSideTranslations(locale, namespacesRequired, config)
//...

PS: see https://github.com/i18next/next-i18next/blob/master/TROUBLESHOOT.md#how-to-explicitly-pass-the-config

If it fixes the issue, I think I know where to look for and might take to time to rework it in there #1973 (esmodules and dual packaging)

[vitoropereira]

I don't know what happened, I just rebuild the application and it works again... 🤷🏻‍♂️
before I do nothing

After I do rebuild.

[avb7]

I am using next-i18next which has a react-i18next dependency. I updated my project to use ESM by adding "type": "module" to my package.json

I had the same problem after this change to my package.json. "react-i18next:: You will need to pass in an i18next instance by using initReactI18next "

The issue for me was resolved by removing "type": "module" from the package.json and renaming the next.config.cjs back to next.config.js.

Root Cause for my setup:
The "type": "module" setting tells Node.js to treat .js files as ESM. By default, Node.js treats .js files as CommonJS modules. However, as for next-i18next, it seems there was still ongoing discussion and no official support yet for ESM syntax

The issue with useTranslation appears to have been a side effect of a conflict in the module system. After removing "type": "module" from package.json (thereby treating .js files as CommonJS modules by default), I could rename next.config.cjs back to next.config.js and useTranslation started functioning correctly again.

Sharing this experience here for anyone who might encounter a similar situation. Further investigation might be required to see if there's a more effective way to handle this transition or to clarify the documentation on how Next.js and react-i18next handle ESM.

[belgattitude]

Cannot promise, but I'll try to come with a pr for full esm. Thanks for digging into it.

FYI I have a repo https://github.com/belgattitude/nextjs-monorepo-example where esm seem to work without warning but my setup explicitly set the config https://github.com/i18next/next-i18next/blob/master/TROUBLESHOOT.md#how-to-explicitly-pass-the-config... see https://github.com/belgattitude/nextjs-monorepo-example/blob/main/apps/nextjs-app/src/backend/i18n/getServerTranslations.ts

[rahad06]

having the same error in a remix app using react-i18next
react-i18next:: You will need to pass in an i18next instance by using initReactI18next
which i have correctly passed already:
/**

• By default, Remix will handle generating the HTTP Response for you.
• You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run npx remix reveal ✨
• For more information, see https://remix.run/file-conventions/entry.server
  */

import {PassThrough} from "node:stream";
import {createReadableStreamFromReadable} from "@remix-run/node";
import {RemixServer} from "@remix-run/react";
import isbot from "isbot";
import {renderToPipeableStream} from "react-dom/server";
import {CacheProvider} from '@emotion/react';
import ServerStyleContext from '../app/styles/server.context';
import createEmotionCache from '../app/styles/createEmotionCache';
import createEmotionServer from '@emotion/server/create-instance';
import {renderToString} from 'react-dom/server';
import {createInstance} from "i18next";
import Backend from "i18next-fs-backend";
import {resolve} from "node:path";
import {I18nextProvider, initReactI18next} from "react-i18next";
import i18next from "./i18next.server"; // The backend file we created
import i18n from "./i18n"; // The configuration file we created
const ABORT_DELAY = 5_000;

export default async function handleRequest(
request,
responseStatusCode,
responseHeaders,
remixContext,
) {
const cache = createEmotionCache();
const {extractCriticalToChunks} = createEmotionServer(cache);

const html = renderToString(
    <ServerStyleContext.Provider value={null}>
        <CacheProvider value={cache}>
            <RemixServer
                context={remixContext}
                url={request.url}
            />
        </CacheProvider>
    </ServerStyleContext.Provider>,
);

const chunks = extractCriticalToChunks(html);

const markup = renderToString(
    <ServerStyleContext.Provider value={chunks.styles}>
        <CacheProvider value={cache}>
            <RemixServer
                context={remixContext}
                url={request.url}
            />
        </CacheProvider>
    </ServerStyleContext.Provider>,
);
let instance = createInstance();

// We can detect the specific locale from each request
let lng = await i18next.getLocale(request);
// The namespaces the routes about to render wants to use
let ns = i18next.getRouteNamespaces(remixContext);
let callbackName = isbot(request.headers.get("user-agent"))
    ? "onAllReady"
    : "onShellReady";
await instance
    .use(initReactI18next)
    .use(Backend)
    .init({
        ...i18n,
        lng,
        ns,
        backend: {
            loadPath: resolve("./public/locales/{{lng}}/{{ns}}.json"),
        },
    });
return new Promise((resolve, reject) => {
    let didError = false;

    let {pipe, abort} = renderToPipeableStream(
        <I18nextProvider i18n={instance}>
            <RemixServer context={remixContext} url={request.url}/>
        </I18nextProvider>,
        {
            [callbackName]: () => {
                let body = new PassThrough();

                responseHeaders.set("Content-Type", "text/html");

                resolve(
                    new Response("<!DOCTYPE html>" + body, {
                        headers: responseHeaders,
                        status: didError ? 500 : responseStatusCode,
                    })
                );

                pipe(body);
            },
            onShellError(error) {
                reject(error);
            },
            onError(error) {
                didError = true;

                console.error(error);
            },
        }
    );

    setTimeout(abort, ABORT_DELAY);
})

}

function handleBotRequest(
request,
responseStatusCode,
responseHeaders,
remixContext
) {
return new Promise((resolve, reject) => {
let shellRendered = false;
const {pipe, abort} = renderToPipeableStream(
,
{
onAllReady() {
shellRendered = true;
const body = new PassThrough();
const stream = createReadableStreamFromReadable(body);

                responseHeaders.set("Content-Type", "text/html");

                resolve(
                    new Response(stream, {
                        headers: responseHeaders,
                        status: responseStatusCode,
                    })
                );

                pipe(body);
            },
            onShellError(error) {
                reject(error);
            },
            onError(error) {
                responseStatusCode = 500;
                // Log streaming rendering errors from inside the shell.  Don't log
                // errors encountered during initial shell rendering since they'll
                // reject and get logged in handleDocumentRequest.
                if (shellRendered) {
                    console.error(error);
                }
            },
        }
    );

    setTimeout(abort, ABORT_DELAY);
});

}

function handleBrowserRequest(
request,
responseStatusCode,
responseHeaders,
remixContext
) {
return new Promise((resolve, reject) => {
let shellRendered = false;
const {pipe, abort} = renderToPipeableStream(
,
{
onShellReady() {
shellRendered = true;
const body = new PassThrough();
const stream = createReadableStreamFromReadable(body);

                responseHeaders.set("Content-Type", "text/html");

                resolve(
                    new Response(stream, {
                        headers: responseHeaders,
                        status: responseStatusCode,
                    })
                );

                pipe(body);
            },
            onShellError(error) {
                reject(error);
            },
            onError(error) {
                responseStatusCode = 500;
                // Log streaming rendering errors from inside the shell.  Don't log
                // errors encountered during initial shell rendering since they'll
                // reject and get logged in handleDocumentRequest.
                if (shellRendered) {
                    console.error(error);
                }
            },
        }
    );

    setTimeout(abort, ABORT_DELAY);
});

}
/**

• By default, Remix will handle hydrating your app on the client for you.
• You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run npx remix reveal ✨
• For more information, see https://remix.run/file-conventions/entry.client
  */

import {RemixBrowser} from "@remix-run/react";
import {startTransition, StrictMode} from "react";
import {hydrateRoot} from "react-dom/client";
import {useCallback, useState} from 'react';
import {CacheProvider} from '@emotion/react';
import ClientStyleContext from '../app/styles/client.context';
import createEmotionCache from '../app/styles/createEmotionCache';
import i18next from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import Backend from "i18next-http-backend";
import {I18nextProvider, initReactI18next} from "react-i18next";
import {getInitialNamespaces} from "remix-i18next";
import i18n from "./i18n"; // The configuration file we created

function ClientCacheProvider({children}) {
const [cache, setCache] = useState(createEmotionCache());

const reset = useCallback(() => {
    setCache(createEmotionCache());
}, []);

return (
    <ClientStyleContext.Provider value={{reset}}>
        <CacheProvider value={cache}>{children}</CacheProvider>
    </ClientStyleContext.Provider>
);

}

i18next
.use(initReactI18next)
.use(LanguageDetector)
.use(Backend)
.init({
...i18n,
ns: getInitialNamespaces(),
backend: {
loadPath: "/locales/{{lng}}/{{ns}}.json",
},
detection: {
order: ["htmlTag"],
caches: [],
},
})
.then(() => {
startTransition(() => {
hydrateRoot(
document,







);
});
}
)

[iwt-jandwinger]

i solve the issue by replace

import { useTranslation } from "react-i18next";

with

import { useTranslation } from "next-i18next";