We can discuss the future of the NextJs example here, as it has gotten a lot of attention lately, and has some shortcomings.

Current problems:

1. Language subpaths are causing a lot of issues
2. Initial language and the translation HOCs are not working well together

Future goals:

1. Refactor server and Link usage to match this example, thus preventing 404s and fixing #569
2. Unify translation workflow, and make it less prone to user error: expose a single withNamespaces HOC that supports tree traversal, and make it abundantly clear that this is the only way to translate content. Fixes issues like #603.

I believe the best way forward is a complete rewrite to simplify a few things. The first step is to decide if we want to support language subpaths at all.

Are there any other issues people are aware of currently?

I would like to compile a full list of current issues we are facing here, as well as any new features, or features we plan to remove, before proceeding with any work on the NextJs example.

Only then can we have a clear plan and execute it.

I wrote it up on Stack Overflow before I figured out how to post here.

https://stackoverflow.com/questions/54951422/error-i18nextwithtranslation-suspended-while-rendering-but-no-fallback-ui-was

I am using v10 and only using the HOC withTranslation. It looks so simple, yet I am not able to get it working. I suspect there is something simple.

Describe the bug I'm having a warning that I think is a false positive. I get the thousands of the following warning: i18next.js:27 i18next::translator: key "xxx" for namespace "translation" won't get resolved as namespace was not yet loaded This means something IS WRONG in your application setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!

I think it's a false positive for 3 reasons:

1. I do call init() before calling ReactDOM.render().
2. I was working until I updated to v10.12.4 (or maybe 10.12.5, not sure...).
3. All my localized strings are correctly displayed in my app.

Before all the warnings, the console prints this:

i18next: languageChanged fr-FR
i18next: initialized {debug: true, initImmediate: true, ns: Array(1), defaultNS: "translation", fallbackLng: Array(1), …}

Occurs in following versions npm 6.12.0 react-i18next 10.13.2

OS (please complete the following information):

• Device: PC Windows 10
• Browser: Chrome 78.0.3904.70 (Build officiel) (64 bits)

Hi, i get this console error in any interaction with my view 'i18next::translator: missingKey fr backoffice'

even i tried ti put react: { wait: true, }

but this did not work

Help!

With Typescript 4.1, now it is possible to use recursive conditional type and template literal string. This PR aims to make the t function fully typed and supporting single and multiple namespaces. It works with useTranslation (hooks), withTranslation (HoC), Trans Component and Translation (render prop).

How to use it

You just have to rely on type augmentation technique to override the default Resources with the resource language object.

For example:

 // src/i18n/config.ts
export const resourcesEN = {
  earnings: {
    header: {
      title: 'Earnings',
      subTitle: 'See your Earnings'
    },
    notes: 'Balance'
  }
};

i18n.use(initReactI18next).init({
  resources: {
    en: resourcesEN,
  },
});

Type augmentation

// @types/react-i18next/index.d.ts
import "react-i18next";
import resourcesEN from "../../src/i18n/config";

declare module "react-i18next" {
  type DefaultResources = typeof resourcesEN;
  interface Resources extends DefaultResources {}
}

And that's all!!! it works like magic! I've prepared a few examples using useTranslation.

Using single and multiple namespaces: https://tsplay.dev/gWozjm

Array case within the resources JSON: https://tsplay.dev/nmq0ZN

Without Namespace: https://tsplay.dev/rw21xW

Below is the diff of the changes that I made: https://gist.github.com/pedrodurek/b23c17bebd9619b0dc0651bc3949a82e/revisions#diff-7aa4473ede4abd9ec099e87fec67fd57afafaf39e05d493ab4533acc38547eb8

Let me know if you want me to change anything, thank you guys! I hope this can help everyone who relies on i18next and typescript.

Checklist

• [x] only relevant code is changed (make a diff before you submit the PR)
• [x] run tests npm run test
• [ ] tests are included
• [ ] documentation is changed or added

🐛 Bug Report

With the merge of my PR https://github.com/i18next/react-i18next/pull/1204, when I try to pass interpolation to tOptions, an error occurs. When I remove the tOptions prop that I passed in, then it works, which is very weird :thinking:.

In the console React on the first few lines says:

The above error occurred in the <br> component:
    in br (at dashboard-greeting/index.tsx:40)
    in Trans (at dashboard-greeting/index.tsx:34)

In the very last line of console React says React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

To Reproduce

To reproduce this you would have to use Trans like this:

<Trans
        i18nKey="home:UserGreetingHeadline"
        defaults="Hallo {{ firstName }},<br/>
        willkommen auf <bold>meine</bold>tonies, hier kannst du ganz zentral
        Deine Toniesammlung und Tonieboxen verwalten."
        values={{ firstName: 'Tiger<no>' }}
        components={{ br: <br />, bold: <strong /> }}
        tOptions={{ interpolation: { escapeValue: true } }}
      />

As for the i18nKey, you do not have to specifically put it into a home.json file :+1:.

Expected behavior

I do expect this to at least be able to render, with or without tOptions prop. I still find it very strange that it is working when I do not use the tOptions prop.

PS. I am happy to work on whatever has to be fixed in case this happens because of either my last PR or if anything else has to be changed :two_hearts:.

Pictures

Picture of the error:

Picture when not using tOptions prop, then it works apparently :thinking: :

Here the message is also broken because of the HTML tags in firstName :cry:.

Your Environment

• runtime version: i.e. node v14.15.0
• i18next version: i.e. 11.7.4
• os: Linux, Ubuntu

The plan is to provide both versions in the future:

• v10 will be the version having the new hooks and suspense version only
• v9 will be the last major version having the current react-i18next available (will go into maintenance mode -> only bug fixes - no new features)

We for sure will have to maintain v9 for a while.

TODO:

• [x] rename useT -> useTranslation, withT -> withTranslations
• [x] report namespaces functionality (auto enabled under the hood - accessible via getFunction)
• [x] handle initialStore, initialLanguage (where? existing Hook, new explicit useSSRI18n Hook, new explicit withSSRI18n HOC)
• [x] rename useReactI18n with useReactI18next here: https://github.com/i18next/react-i18next/blob/master/src/hooks/context.js#L35
• [x] create a next.js sample as proof of concept: getInitialProps as a HOC, or just a plain function provided to get that values for initialI18nStore and initialLanguage from react-i18next? (https://github.com/i18next/react-i18next/issues/671 seems a prove of working as expected)
• [x] add tests for all the new stuff
• [x] add typings for typescript

Release winter 2018/19: https://reactjs.org/blog/2018/11/27/react-16-roadmap.html (won't be 16.7!!! https://reactjs.org/blog/2018/12/19/react-v-16-7.html)

Release seems to be 4th of February: https://github.com/facebook/react/pull/14692

Describe the bug When changing language (with XHR backend setup), changing the route in react-router and setting a state value I get the well-known warning below:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

I'm guessing it's due to the async XHR call to the language file because it only happens on the first load.

I tried to go around the issue but couldn't nail it so far.

I set up a code sandbox example here: https://codesandbox.io/s/6vm8o90jpk

Note: I'm not sure this belongs to this repo or not, if you want me to move it somewhere else please let me know.

Thanks for your help!

Occurs in react-i18next version 10.5.1

To Reproduce Steps to reproduce the behavior:

1. Go to 'https://6vm8o90jpk.codesandbox.io/en/hello'
2. Open the console
3. Click on 'Change lang'
4. See the error in console

Expected behaviour A clear and concise description of what you expected to happen.

Screenshots http://recordit.co/tKnLmlyKMg

OS :

• Device: MBP 2017 15"
• Browser: Chrome 72.0.3626.121

Describe the bug We're using the new useTranslation hook in our components. However, during development React complains that some hooks have been rendered conditionally and that the amount of hooks in a component has changed. When switching back to the Translation HOCs the error disappeared, so I assume it's because of this line here:

https://github.com/i18next/react-i18next/blob/ece439751c09b0cbe8170f07bfe79617ce589cb8/src/useTranslation.js#L14

Conditionally rendering hooks break the "Rules of Hooks", so this should be refactored to always render all hooks.

Our component does not render any hooks conditionally, I have checked thrice.

Occurs in react-i18next version 10.0.5

Expected behaviour No error to occur and no hooks rendering conditionally.

Screenshots

OS (please complete the following information):

• Device: MBP 2015, Latest MacOS
• Browser: Chrome 72.0.3626.96

Describe the bug I have a few pages that use React.lazy. It seems that on those pages, my translations aren't loaded (or maybe are loaded after the component renders).

I've tried several variations of setting react: { useSuspense: false} and useTranslation('translations', {useSuspense: false})` but have had no success getting translations to display.

I'm not sure if this is a bug, or a misconfiguration on my part.

Occurs in react-i18next version 10.6.1

To Reproduce

1. Use the following config: i18n.ts

import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-xhr-backend';
import {initReactI18next} from 'react-i18next';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    defaultNS: 'translation',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
    load: 'languageOnly',
    saveMissing: true,
  });

export default i18n;

Optionally add react: { useSuspense: false}

2. Lazy load a component that uses the useTranslation hook:

const NotFound = React.lazy(() => import('./NotFound'));

import React from 'react';
import {useTranslation} from 'react-i18next';

const NotFound: React.SFC = () => {
  const [t] = useTranslation();
  return <h1 data-testid='not-found-heading'>{t('not-found')}</h1>;
};

export default NotFound;

Optionally use useTranslation('translations', {useSuspense: false})`

Expected behaviour I expect to see my translations, not the key of the translation.

OS (please complete the following information):

• Device: 2016 MBP 13" macOS 10.14.4
• Browser: Firefox Developer Edition 67.0b6

Hi,

I'm trying to configure i18next with my React project and I can't make it work at all..

Whatever I try, I get either this :

TypeError: Cannot read property 'options' of undefined
    at new Translate (/Users/ank49/Documents/React Projects/Portfolio React i18n/node_modules/react-i18next/dist/commonjs/translate.js:65:32)

or this :

TypeError: Cannot read property 'getFixedT' of undefined
    at Translate.componentWillMount (/Users/ank49/Documents/React Projects/Portfolio React i18n/node_modules/react-i18next/dist/commonjs/translate.js:84:46)

I initialized my i18n with the React and WebPack 2 example as the following :

import i18n from 'i18next'
import LanguageDetector from 'i18next-browser-languagedetector'

i18n.use(LanguageDetector)
    .init({
      loadPath:    'locales/{{lng}}/{{ns}}.json',
      preload:     ['en-US', 'fr-FR'],
      fallbackLng: 'fr-FR',
      // wait: true, // globally set to wait for loaded translations in translate hoc

      // have a common namespace used around the full app
      ns: ['common',
        'navbar',
        'footer',
        'header',
        'about',
        'experience',
        'skills',
        'p_app',
        'p_web',
        'cv',
        'social',
        'events',
        'contact',
        'support'],

      defaultNS: 'common',

      debug: true,

      // cache: {
      //   enabled: true
      // },

      interpolation: {
        escapeValue: false, // not needed for react!!
      },
      wait:          true,
    })

export default i18n

and my component I'm trying to translate is as follow :

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import withStyles from 'isomorphic-style-loader/lib/withStyles'
import Typist from 'react-typist'
import { translate } from 'react-i18next'
import { Parenthesis } from '../../components'

import style from './header.scss'

class Header extends Component {
  static propTypes = {
    t: PropTypes.func.isRequired,
  }

  render() {
    const { t } = this.props

    return (
      <div>

        <section className="header">
          <div className="header_content">
            <div className="header_content_inner">
              <h1 id="homeTextHead">{t('header.title')}</h1>
              <hr className="bg_dark"/>
              <br/>
              <Typist avgTypingDelay={90} className="typed_text">
                {t('header.name')}
                <br/>
                <Parenthesis>{t('header.pseudo')}</Parenthesis>
                <br/>
                <br/>
                {t('header.description')}
              </Typist>
            </div>
          </div>
        </section>

      </div>
    )
  }
}

export default withStyles(style)(translate(['header'], { wait: true })(Header))

I also tried with the decorator but I got the same issues..

@translate(['header'])
class Header extends Component {
...
}

export default withStyles(style)(Header)

Any help is welcome, thanks in advance guys !

🚀 Feature Proposal

Currently it is necessary to know the JSX code for the component very well before using it. So I started to put "everything inside the component in one line" so that the translation.json file keeps being easy to edit.

But: It is quite common to use auto formatting tools like "Prettier" in IDEs. Unfortunately those tools tend to reformat these JSX code parts as soon as they become too complex. This will always break the component.

So, I would be looking for a way to make more robust with regards to the formatting of JSX in your editor

Motivation

Keeping up with reformatted JSX for the component is tedious and sometimes seems even impossible to do.

Example

This works flawlessly

<Trans i18nKey="msg_new_user_register">
   New user - please <Link to="/register">register</Link>
</Trans>

with this in translation.json

  "msg_new_user_register": "New user - please <1>register</1>",

but, due to Prettier reformatting, this no longer works:

<Trans i18nKey="msg_new_user_register">
   New user - please{" "}
   <Link
      to="/register"
      state={
         location.state
         ? { from: { pathname: location.state.from.pathname } }
          : null
      }
   >
   register
   </Link>
</Trans>

🐛 Bug Report

JSON files are not being loaded when android phone has no connection. It works fine on iOS though. I have seen a similar issue but the author doesn't remember how he fixed it.

To Reproduce

A minimal reproducible example. A codesandbox example or similar or at least steps to reproduce the behavior:

  const i18nRef = useRef(createInstance());
  const [i18nReady, setI18nReady] = useState(false);

  const jsonMap = {
    en,
    de,
  };

  const initI18nInstance = async () => {
    const { languageTag } = deviceLanguage;

    const cachedTranslations = await getCachedTranslations(languageTag);

    i18nRef.current.init({
      lng: languageTag,
      cache: false,
      resources: {
        [languageTag]: {
          [DEFAULT_NAMESPACE]: cachedTranslations
            ? cachedTranslations.translations
            : jsonMap[languageTag],
        },
      },
    });

Expected behavior

It should load json files and I should be able to see translation values instead of keys

Your Environment

• runtime version:node 16
• i18next version: 22.4.6
• "react-i18next version": "11.8.5"
• os: Android

🐛 Bug Report

After updating react-i18next from [11.16.2] to [12.1.1], I have started getting an error on the useTranslation bit of the following line:

const { t } = useTranslation('trans');

The error is: Type instantiation is excessively deep and possibly infinite.ts(2589)

I can ignore it by using /* @ts-ignore */ but that's not ideal. The error started appearing after the update and it's only on this single file (the whole app uses translation in the exact same way but strangely I am only getting this error here).

To Reproduce

Cannot reproduce

Home.tsx

import { useTranslation } from 'react-i18next';

const Home = () => {
  const { t } = useTranslation('trans');

  return (
    <div>
      <div>{t('home.firstLine')}</div>
      <div>{t('home.secondLine')}</div>
    </div>
  );
};

export default Home;

init-i18next.js

import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as fr from '@static/translations/fr.json';
import * as en from '@static/translations/en.json';

const resources = {
  fr: {
    trans: fr
  },
  en: {
    trans: en
  }
};

const lng = navigator ? navigator.language.substring(0, 2) : 'fr';

i18next.use(initReactI18next).init({
  lng, // as default
  fallbackLng: 'fr',
  defaultNS: 'trans',
  resources,
  compatibilityJSON: 'v3',
  interpolation: {
    escapeValue: false
  }
});

export default i18next;

i18next.d.ts

import { resources, defaultNS } from './i18next';

declare module 'i18next' {
  interface CustomTypeOptions {
    defaultNS: typeof defaultNS;
    resources: typeof resources['fr'];
  }
}

Expected behavior

No errors were expected, like I had before the package update.

Your Environment

• runtime version: React 18.0.0
• i18next version: 22.4.6
• react-i18next version: 12.1.1
• os: Mac

🐛 Bug Report

In our project, we have 60430+ keys distributed across 77 namespaces and we have a good amount of deeply nested keys as well. The Typescript compilation almost died on running the TS check.

To Reproduce

1. Add 60430+ keys

2. Add a typing file

import 'react-i18next';
// Resouce with 77 namespace and 60430+ keys
import type { TranslationResources } from '../translations/types';
declare module 'react-i18next' {
  interface CustomTypeOptions {
    defaultNS: 'common';
    resources: TranslationResources;
  }
}

Your Environment

node - 12.19.1 npm - 6.14.8 typescript - 4.9.3 react-i18next - 11.18.0 i18next - 21.8.13

🐛 Bug Report

Using the simple react-typescript example and introducing a variable to interpolate in the translation file causes Type instantiation is excessively deep and possibly infinite. or 'TFunctionDetailedResult<never>' is not assignable to type 'ReactI18NextChild | Iterable<ReactI18NextChild>'. Property '[Symbol.iterator]' is missing in type 'TFunctionDetailedResult<never>' but required in type 'Iterable<ReactI18NextChild>' to be raised

To Reproduce

Using the simple react-typescript example in this repo, introduce a variable in the translation file

{
  "title": "Welcome to react using react-i18next fully type-safe",
  "description": {
    "part1": "This is a simple example. {{hello}}",
    "part2": "😉"
  }
}

then in app.tsx try accessing description.part1 using the t function derived from useTranslation.

<p>{t('description.part1', {hello: 'string'})}</p>

or

<p>{t('translation:description.part1', {hello: 'string'})}</p>

respectively.

See this commit https://github.com/adr29truck/react-i18next/commit/24a615a6bc1b56b133e06cefdf21662efc7e4d82 on fork

Expected behavior

It should not raise type errors.

Your Environment

• runtime version: node v16.13.0, chrome
• i18next version: ^22.4.3
• react-i18next version: ^12.1.1
• os: Mac

🐛 Bug Report

getting this issue in my react native project. Using the same versions in another react native project both has same react native version. But issue persist in one not another.

MY code i18next file----- import i18next from 'i18next'; import english from './english.json';

import { initReactI18next } from 'react-i18next';

i18next.use(initReactI18next).init({ compatibilityJSON: 'v3', lng: 'en', resources: { en: english, }, react: { useSuspense: false, }, });

export default i18next;

--using manner---- const { t, i18n } = useTranslation(); ----{t('ReviewingYou')}

Your Environment

• runtime version: i.e. node v14, deno, browser xy
• i18next version: "i18next": "^22.0.6", "react-i18next": "^12.0.0", "react-native-translation": "^1.1.0", "react": "18.1.0", react native version 0.70.6
• os: Windows
• any other relevant information