React i18next Typescript error using t('key') always need to specify namespace

Question

After following exactly the document provided here to type correctly my translation key, I hope to use t('key') with a fully typed on my translation function. But on my simple StackBlitz example, I always need to prefix my key with namespace, even if I import it correctly in useTranslation('ns1').

const TranslationItem = () => {
  const { t } = useTranslation('ns1');

  return (
    <div>
      <div>Type Error : {t('title')}</div>
      <div>No Type Error : {t('ns1:title')}</div>
    </div>
  );
};

When I specify a namespace, I should use the simple key without prefixing with ns1:

const TranslationItem = () => {
  const { t } = useTranslation('ns1');

  return (
    <div>
      <div>Works well : {t('title')}</div>
    </div>
  );
};

Hongming Wang · Accepted Answer · 2024-06-10 18:41:57Z

0

your code works fine in Visual Studio code but it does give typescript error in StackBlitz

Type instantiation is excessively deep and possibly infinite.

the reason is that Stackblitz does not support static assets at the moment. so your file can not read JSON. https://stackoverflow.com/a/65291298/23400426

one workaround is to make your JSON file in .ts extension and refresh the browser, that should fix the problem.

const ns1 = {
title: 'Welcome to react using react-i18next fully type-safe',
description: {
  part1: 'This is a simple example.',
  part2: '😉',
},
  title2: 'tete',
};

export default ns1;

answered Jun 10, 2024 at 18:41

Hongming Wang

214 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React i18next Typescript error using t('key') always need to specify namespace

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related