Closed fuzunspm closed 3 years ago
Please post on StackOverflow for help.
There should be answer to this. The stackoverflow thread of this query shows an answer but it is not accepted and I tried that way too but it didn't work. My nextjs app build is failing due to this
This is the error I am getting on build
Error occurred prerendering page "/account-activate-provider-link". Read more: https://err.sh/next.js/prerender-error
Error: Initial locale argument was not passed into serverSideTranslations
The error is self-explanatory:
In @fuzunspm's case, they should double check what locale.locale
is, because it's probably undefined
.
@AhsanNissar There may indeed be an issue with plugin composition here, but that is going to vary, case-by-case. next-i18next
only requires that you pass the i18n
object into your next.config.js
. How you manage your config will depend on your use case.
This is my next-i18next.config.js code
module.exports = {
i18n: {
defaultLocale: 'en',
locales: ['en', 'de'],
defaultLanguage: 'en',
fallbackLng: ['en'],
},
};
and I just passed i18n in next.config.js by requiring it like this const { i18n } = require('./next-i18next.config');
The problem is at places like this
export const getStaticProps = async ({ locale }) => ({
props: {
...(await serverSideTranslations(locale, ['common'])),
},
});
The locale is not initialized when making a build but when runningg the application it takes into account the deaultLocale and works fine.
@AhsanNissar If you believe as though you have found a bug in next-i18next
, please open a GitHub issue with a reproducible repository. Thanks!
@AhsanNissar There is an issue about next-i18next
but I don't know how to debug or fix it and maintainers don't have any desire to accept and fix it. I used getStaticProps
as a workaround like below. In addition to that you may have to modify your package.json for react
and react-dom
to use "next" version
export const getStaticProps = async ({ locale }) => ({
props: {
...(await serverSideTranslations(locale, [
"common",
"nav",
"devsidenav",
"loading",
])),
},
});
@fuzunspm Fixing a bug starts with a reproducible example, which I have not yet seen. Thanks.
your first reply was about directing me to stackoverflow and I can see many examples in the issues. Anyway, I already commented a workaround for the issue
@fuzunspm My application is built with nextjs and not with reactjs so I do not need to add any workaround and according to example in this repo they are already using getStatucProps
. Nevertheless, I know there is an issue and I have already created a repl for it but I need to give that repo the same structure as my application just to reproduce that error. @isaachinman I'll try on this weekend to create a reproducible example and if successfull, then I will provide you with a link in my issue that I have opened today.
I also use nextjs FYI @AhsanNissar
Thanks @AhsanNissar, let's continue discussion there.
@fuzunspm maybe you need to see this https://stackoverflow.com/a/67066847/11746564
Hello everybody. I faced with this issue today during docker deployment. Please be sure that you copy your next.config.js and next-i18next.config.js in your docker container (or deployment service). If you missed next.config.js then next.js after deployment will use default settings without next-i18next.config.js and as result initial local will be undefined. I hope it helps some one. Happy coding. https://nextjs.org/docs/deployment
Hello everybody. I faced with this issue today during docker deployment. Please be sure that you copy your next.config.js and next-i18next.config.js in your docker container (or deployment service). If you missed next.config.js then next.js after deployment will use default settings without next-i18next.config.js and as result initial local will be undefined. I hope it helps some one. Happy coding.
Thanks a lot, I got it working. I added these 2 lines according to your message:
COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/next-i18next.config.js ./
Finally! Main issue is, even if you have default language is set, you have to render first page, index.js, with /en/index or /tr/index, or use routing to / instead of /index, after that everything works as expected
Finally! Main issue is, even if you have default language is set, you have to render first page, index.js, with /en/index or /tr/index, or use routing to / instead of /index, after that everything works as expected
Congrats. Unfortunately I don't understand what you're saying. Could you explain further what you've done to resolve this?
In my case I'm not using i18n routing and have not modified next.config.js to include i18n. At this point I don't know where/how the locale.locale should be set and what the value of locale.locale should be. Ex. a string, an object, or...?
locale is string. to solve my issue I had to replace all of my /index routers to / path
Hello everybody. I faced with this issue today during docker deployment. Please be sure that you copy your next.config.js and next-i18next.config.js in your docker container (or deployment service). If you missed next.config.js then next.js after deployment will use default settings without next-i18next.config.js and as result initial local will be undefined. I hope it helps some one. Happy coding. https://nextjs.org/docs/deployment
Thanks a lot man. You saved my day
For me, upgrading next to the latest version solved the issue.
I update Next version or downgrade next-i18next solved the issue.
I started having the issue since I added next-compose-plugins to be able to run bundle-analyzer along with i18next
next.config.js
const withPlugins = require('next-compose-plugins')
const { i18n } = require('./next-i18next.config');
const withBundleAnalyzer = require("@next/bundle-analyzer")({
enabled: process.env.ANALYZE === "true",
});
module.exports = withPlugins([
[withBundleAnalyzer],
i18n
])
Things were working fine with this config:
const { i18n } = require('./next-i18next.config');
module.exports = {
i18n,
};
Now I'm stuck for an hour trying to figure out what started to be missing to i18next. I think this is a topic worth considering by the i18next team since it is something everyone will encounter when he will want to optimize his app
This is the error I get:
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Initial locale argument was not passed into serverSideTranslations
at _callee$ (D:\Work\WeAlly.org\node_modules\next-i18next\dist\commonjs\serverSideTranslations.js:169:19)
at tryCatch (D:\Work\WeAlly.org\node_modules\regenerator-runtime\runtime.js:63:40)
at Generator.invoke [as _invoke] (D:\Work\WeAlly.org\node_modules\regenerator-runtime\runtime.js:293:22)
how to solve this problem
Hello everybody. I faced with this issue today during docker deployment. Please be sure that you copy your next.config.js and next-i18next.config.js in your docker container (or deployment service). If you missed next.config.js then next.js after deployment will use default settings without next-i18next.config.js and as result initial local will be undefined. I hope it helps some one. Happy coding. https://nextjs.org/docs/deployment
This solution is right. And need to copy the next-i18next.config.js to the root directory for the project.
COPY --from=builder /app/next-i18next.config.js ./
Hi @fuzunspm, I don't know if you still facing this issue or not, but I was getting the same error message, however I found that next/link component the one was making the bug.
I was using it like this
< Link href="/register" > {t("registerNow")} < / Link>
, and I was able to solve it by converting it to this
< Link href="/register"> < a > {t("registerNow")}</ a > </ Link>
after doing this the error not shown again, I think you can check this on your side. note: the space in tags just to show the code
@Abdelrhmangad Thank you for your suggestion and reply. I eventually replaced this package with a custom made one but I will try it anyway on a test project.
I had similar problem.
Turns out the mechanism I was using wasn't appropriate.
I wasn't using locale in the URL when it comes to the defaultLocale
For example, my URLs are of type http://localhost:3000/auth/live-counselling
while they should be of type http://localhost:3000/en/auth/live-counselling
Further, in my configuration, I have declared localeDetection
false for some clash in headers coming from foreign region where pages were failing (niche bug reported over sentry)
module.exports = {
i18n: {
defaultLocale: 'en',
locales: ['en', 'hi'],
/**
* Turn off automatic locale detection based on header (Accept-Language) or domain
*/
localeDetection: false
},
/**
* updates to your translation JSON files without having
* to restart your development server
*/
reloadOnPrerender: true,
// react: { useSuspense: false } //this line
/**
* Preload the translations
*/
ns: ['common']
};
So, what was essentially happening was my locale
in getStaticProps was always undefined
export const getStaticProps = async ({ locale}) => ({
props: {
...(await serverSideTranslations(locale, ['common']))
}
});
The fix I made was to involve defaultLocale
voila everything is working again
export const getStaticProps = async ({ locale, defaultLocale }) => ({
props: {
...(await serverSideTranslations(locale ?? defaultLocale, ['common']))
}
});
My packages are as follows
"next": "^12.2.3",
"next-auth": "^4.10.2",
"next-i18next": "^11.3.0",
"next-redux-wrapper": "^7.0.5",
"next-transpile-modules": "^9.0.0",
Describe the bug
It won't work after upgrading both i18next and nextjs. I'm getting
on index.js
Occurs in next-i18next version
"next-i18next": "^8.1.2",
OS (please complete the following information)
Additional context
next-i18next.config.js
next.config.js
_app.js
index.js