-
-
Notifications
You must be signed in to change notification settings - Fork 764
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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 #1917
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 #1917
Comments
Try to move the Layout component to a different file. |
serverSideTranslations should be in the same file where useTranslation is used, isn't it? |
I used it in a different file when the warning happens. I moved it to
not necessarily I think #1840 (comment) how next handle layout https://nextjs.org/docs/basic-features/layouts |
Then probably we have to live with that warning... 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')) |
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. |
Did you resolve this problem? |
not stale |
@yuuk I didn't |
I'm experiencing the same thing. For me it seems like an issue with bundling (by debugging stack traces) where the 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. |
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. |
Maybe just defining react-i18next in your dependencies will work for you? Then there's no need for a fork. |
Already have, however, the module resolution in a symlink setup does not function well in this case.
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:
and
|
I have the same problem but on a completely static 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. |
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 Unfortunately I couldn't get @martinjlowm 's workaround to work for me, I got |
i18next-node-fs-backend is deprecated and replaced by i18next-fs-backend... make sure you have updated all i18next dependencies first |
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? |
It's the exact same as the original post, except that |
|
So I went ahead and forked the project, changed
It seems in order to support Yarn PnP, |
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... |
The only downside I can see is that people will have to install
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) |
…uming Yarn PnP projects don't have multiple instances of i18next See i18next#1917
…uming Yarn PnP projects don't have multiple instances of i18next See i18next#1917
@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). |
@martinjlowm @bryantobing12 can you confirm? |
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. |
Just dropping a note for pnpm users. In theory you might face 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 On pnpm 7.30.3 this config works pretty well.
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 This should make the solution with imports optional (ie: #1917 (comment)). This matters for 2 reasons
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 |
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. |
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. |
Package manager and version ? Your package.json can help also. Even just with i18next related deps. Thanks |
The package manager you use ? Pnpm, yarn, npm ? And version ? |
Hello I have the same issue when I build. I'm using next-i18next & next 13 Here is my dependencies :
The issue occur on my page /src/pages/game/[name].jsx
Here is the console logs when I build :
Eveything is working in dev. How can I fix this issue please? |
I'm using npm version 8.19.2. |
I just fixed the error. I had to put these versions: |
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 ? |
Just to confirm, to make it work you've downgraded versions right ? Or I miss something cause it looks fine.
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 |
Yes. I made the downgraded.
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: 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.
Now I'm going to try to get it working again, just local. If I get it I'll get back to you here. |
Could you try to run npm dedupe 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 |
Here is the sequence of the test I did now: After I run: Then... 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. |
Thank you so much... Can I ask you 2 more things:
// _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)
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) |
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. 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 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. |
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 |
having the same error in a remix app using react-i18next
import {PassThrough} from "node:stream"; export default async function handleRequest(
} function handleBotRequest(
} function handleBrowserRequest(
}
import {RemixBrowser} from "@remix-run/react"; function ClientCacheProvider({children}) {
} i18next |
i solve the issue by replace import { useTranslation } from "react-i18next"; with import { useTranslation } from "next-i18next"; |
🐛 Bug Report
This is only happening when I run
build
script and my layout calluseTranslation
hookTo Reproduce
A small repo to reproduce
pnmp run build
you'll see the warningThis is the only place I call useTranslation hook
my only page is
pages/index.tsx
and I already called the
serverSideTranslation
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 scriptYour Environment
The text was updated successfully, but these errors were encountered: