Next 13 Upgrade Typescript error

[yudyananda]

Follow the upgrade instruction but now i have typescript complaining about Type instantiation is excessively deep and possibly infinite

// src/types/next-i18next.d.ts
import 'i18next';
import type common from './src/locales/en/common.json';
import type home from './src/locales/en/home.json';

interface I18nNamespaces {
  common: typeof common;
  home: typeof home;
}

declare module 'i18next' {
  interface CustomTypeOptions {
    resources: I18nNamespaces;
  }
}

// pages/index.ts
export default function HomePage(props: any) {
  const router = useRouter();
  const { t } = useTranslation('common');

  return (
    <div>
      {router.locale} - {t('sapaan')}
    </div>
  );
}

any idea?

[adrai]

@pedrodurek related? i18next/i18next#1857

[yudyananda]

now it's working somehow, but i wonder why the autocomplete only working for the object?

for example vscode doesn't give any autocomplete for something like {t('nav.${index}.sub.${subIndex}.label')} it just stuck in the key of array and typescript complaining about Type ... is not assignable to type 'ReactI18NextChild | Iterable<ReactI18NextChild>

{
  "nav": [
    {
      "label": "Insight"
    },
    {
      "label": "Users",
      "sub": [
        {
          "label": "Applicant"
        },
        {
          "label": "Student"
        }
      ]
    }
  ]
}

[adrai]

https://www.i18next.com/overview/typescript#type-error-template-literal

[yudyananda]

as const didn't work for me ;(

[adrai]

you may need to provide a minimal reproducible example... it seems to work