Can't set localeDetection in the next-i18next.config

[skernke]

I hope everything is alright since this is my very first report.
I just tried to upgrade my nextjs application. Which worked fine so far. But when I try to build the application I get an error:

🐛 Bug Report

Type error: Argument of type '{ i18n: { locales: string[]; defaultLocale: string; localeDetection: boolean; }; debug: boolean; nonExplicitSupportedLngs: boolean; reloadOnPrerender: boolean; trailingSlash: boolean; }' is not assignable to parameter of type 'UserConfig'.
  Types of property 'i18n' are incompatible.
    Type '{ locales: string[]; defaultLocale: string; localeDetection: boolean; }' is not assignable to type 'NextJsI18NConfig'.
      Object literal may only specify known properties, and 'localeDetection' does not exist in type 'NextJsI18NConfig'.

To Reproduce

the next-i18next.config.js looks like this:

module.exports = {
  i18n: {
    locales: ['default', 'de', 'en'],
    defaultLocale: 'en',
    localeDetection: false,
  },
  debug: process.env.NODE_ENV === 'development',
  nonExplicitSupportedLngs: true,
  reloadOnPrerender: process.env.NODE_ENV === 'development',
  trailingSlash: true,
};

our _app.page.tsx looks like this:

import { appWithTranslation } from 'next-i18next';
import nextI18NextConfig from '../../next-i18next.config.js';
...

export default appWithTranslation(MyApp, nextI18NextConfig);

Expected behaviour

I would expect that the method appWithTranslation/UserConfig accepts the property localeDetection. Since nextjs would accept it by default.
I used this approach to always have the language in the URL https://nextjs.org/docs/advanced-features/i18n-routing

Our Environment

node v16.14.0
"next": "13.0.6",
"next-i18next": "^13.0.0",
"i18next": "^22.0.8",
"react-i18next": "^12.0.0",

[adrai]

Seems to work in this example: https://github.com/i18next/next-i18next/tree/master/examples/simple
Please provide a minimal reproducible example.

[skernke]

so I found its because of the lines above next-i18next.config.js which prevent that this error appear:
https://github.com/i18next/next-i18next/pull/2051/files
But wouldn't it be correct to add the property localeDetection:boolean to the NextJsI18NConfig ?

next-i18next/src/types.ts

Line 18 in cc1d9d1

type NextJsI18NConfig = {

[adrai]

And why do you want to remove this?

/**
 * @type {import('next-i18next').UserConfig}
 */

Maybe @belgattitude can help?

[belgattitude]

Thx for mention, I'm still off a couple of days but I'll read properly soon and see what we can do.

[skernke]

And why do you want to remove this?

/**
 * @type {import('next-i18next').UserConfig}
 */

Maybe @belgattitude can help?

Probably we removed it earlier by accident. But to me, it looks like with this, the error didn't show up although the interface from your and next config differ at this point. but I'm not quite sure about it.

[hgbao]

I'm running into this issue too

[belgattitude]

It will be fixed in #2057.

In the meantime, you can safely remove the typecheck in the config

/**
 * @todo - add -> type {import('next-i18next').UserConfig}
 */

[belgattitude]

Released in 13.0.1

[skernke]

I think there happened a mistake.

next-i18next/src/types.ts

Line 30 in de4105e

localeDetection?: false;

I guess this should be of type boolean and not false. sorry to disturb you.
thank you for your fast response and feedback I really appreciate it.
also this line

next-i18next/src/types.ts

Line 27 in de4105e

http?: true;

[adrai]

changing that to boolean would not solve it...
The problem is next.js itself is defining it as false here and here
... and on the installed next.js version it is included in node_modules/next/dist/next-config-validate.js as boolean....
This means the Vercel team (@Timer) needs to adapt their types first to be boolean instead of false everywhere.

[bostrom]

We're also getting

Types of property 'http' are incompatible.
  Type 'boolean' is not assignable to type 'true'.

for the i18n.domains.http property when using

export default appWithTranslation<AppProps>(
  App,
  nextI18NextConfig,
);

Is there any cleaner way of fixing this than to cast the nextI18NextConfig object to UserConfig:

export default appWithTranslation<AppProps>(
  App,
  nextI18NextConfig as UserConfig,
);

[Lumi669]

We are having the same issue.

`import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import i18nextConfig from "../../../../../next-i18next.config";
import { getSession } from "next-auth/react";

export async function getServerSideProps(context) {
const session = await getSession(context);
if (!session) {
return {
redirect: {
permanent: false,
destination: /${context.locale}/,
},
};
}
return {
props: {
...(await serverSideTranslations(context.locale, ["common", "users"], i18nextConfig)),
locale: context.locale,
userRole: session.user["role"],
},
};
}
`

module.exports = { i18n: { locales: ["fi", "sv", "en"], defaultLocale: "fi", localeDetection: false, }, reloadOnPrerender: process.env.NODE_ENV === "development", };