what the title says

Hi, i18n,

While browsing the gitHub, I just learned that gitHub now supports many different languages.
Also, per selecting the language in dropdown, the URL also gets updated with corresponding country code! (not the contents though).
Wonder how can it be achieved with i18thnext (or is gitHub already using your library?).
I did a bit of testing/implementing but no success so far, if there's a way it will be AWESOME(care to share how to) otherwise it can be a good proposal for future development?

Cheers,

sjb3

Do you have a documentation issue?

In the fallback section you describe that you set the default language to 'dev', however it is set to 'en-AU'. Is this a mistake or is the usual developer language 'en-AU'? I also see that in this documentation there is explicitly a 'dev' language set, so I think it must be changed: https://www.i18next.com/overview/configuration-options

The default is set to dev which means developer language. At first this might look strange to set the default to a language, but this enables to set the saveMissing feature to send new keys to that developer specific language. From there your translators can modify the texts to a translation file containing, for instance, proper English, including defined terminology. For production use, just set fallbackLng to an existing language.

Do you have a technical/code issue?

No technical issue

You have already researched for similar issues?

No issues found

Are you sure this is an issue with i18next or are you just looking for some help?

I think it is an issue with the documentation

Documentation issue

Correct the setting of default language to 'dev' instead of using 'en-AU'.
https://www.i18next.com/principles/fallback#fallback-to-different-languages

// finally, developer language
-     fallbacks.push('en-AU');
+    fallbacks.push('dev');
    return fallbacks;

Motivation

It was confusing for me in the first glance to understand why you describe to set it to 'dev' but on the other way you set it to 'en-AU'.

Documentation issue

The current i18next TypeScript documentation mentions that TypeScript version 5 is recommended to be used. In practice, intellisense does not work at all in TypeScript version 4. So developers must use TypeScript version 5 if they use the code from the documentation.

https://www.i18next.com/overview/typescript

To reproduce it, you can use this example and downgrade TypeScript to v4.

In my case, the problem was that I had not noticed the 'Intellisense not working' section in troubleshooting and was trying to use the examples from the documentation using v4.

Motivation

To provide accurate guidance and improve the developer experience, it is crucial to update the documentation and clearly state that intellisense support is only available starting from TypeScript version 5.

The documentation should highlight that all examples and solutions related to TypeScript and i18next are applicable and relevant only to TypeScript version 5 onwards.

This clarification will help developers avoid spending unnecessary time trying to set up Intellisense support for i18next with TypeScript version 4, and ensure that they are aware of the minimum TypeScript version requirement.

🐛 Bug Report

Hello I am not sure if its bug or I am having an error but I wanted to open this issue maybe some others will need it later on.
So my problem is, I am using i18next for my ReactJS project and it loads perfectly when I am using in a single tab. But when I am using target="_blank" and click it, it cannot find any of the keys.

To Reproduce

My Configuration of i18next

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

i18n
    // load translation using http -> see /public/locales
    // learn more: https://github.com/i18next/i18next-http-backend
    .use(Backend)
    // detect user language
    // learn more: https://github.com/i18next/i18next-browser-languageDetector
    .use(LanguageDetector)
    // pass the i18n instance to react-i18next.
    .use(initReactI18next)
    // init i18next
    // for all options read: https://www.i18next.com/overview/configuration-options
    .init({
        fallbackLng: 'de',
        debug: true,
        whitelist:["en","de","tr"],
        interpolation: {
            escapeValue: false, // not needed for react as it escapes by default
        },
        backend: {
            loadPath:'assets/locales/{{lng}}/{{ns}}.json',
            allowMultiLoading:true,
        },
        react:{
            useSuspense:false,
            wait:true
        },
    });

export default i18n;

Expected behavior

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

Loading all the keys as usual

Your Environment

• runtime version: i.e. Google Chrome, ReactJS
• i18next version: i.e. 19.8.4
• os: Linux
• "i18next-browser-languagedetector": "6.0.1",
  "i18next-http-backend": "1.0.21",
  "i18next-sync-fs-backend": "1.1.1",

It seems that the docu is out of sync with the i18next module. TypeSctipt complains about the import as suggested in the docu:

import i18next from 'i18next' 

The way it works is:

import * as i18next from 'i18next';

🐛 Bug Report

The i18next website lists Django as one of the supported frameworks and includes the Django logo. However, this appears to be a misunderstanding based on the existence of a project named django-i18next. Unfortunately, the only connection between that project and the i18next JavaScript framework is the name. The Django project adds a few small features to the Django i18n support in its templating language, and does not provide any integration with the JS framework.

To Reproduce

The i18next project site links to django-i18next in the Supported frameworks section, and includes the Django logo in the ecosystem graphic. I did not find any other references to Django on the site, so the django-i18next project appears to be the only connection.

However, examining the project documentation (note: new link, current link you have is broken) and GitHub repository I found no references to the Javascript library, or, for that matter, any other JS code. The core of the project is a set of Django template language extensions that let you override the current locale selectively or disable translations, nothing more.

Expected behavior

Please remove the mention of Django altogether. The link is confusing and misleading.

Just a notification, took me some time but then I got it working ;)

https://www.i18next.com/add-or-load-translations.html#

In the "Add after init" part, there's a single quote missing in the example. Just notifying you guys in case you have as much OCD as me.

// Missing a single quote after 'en
i18next.addResourceBundle('en, 'namespace1', {
  key: 'hello from namespace 1'
});

I've made a port of i18next, and I'd appriciate it if it could be added to the page. All the tests in the repo are passing, you can try it out yourself, it's on composer and all that.

Link to the repo https://github.com/pkly/i18next-php

I'm planning to port over the more useful plugins and add implementations for them as time allows and they could be useful, so.

As for why: the other PHP versions seemed kinda meh to me, I'm aware of another port of it being made currently, but it's targetting a specific framework - something I've wanted to avoid.

🐛 Bug Report

This page documents what JSON format is supported by i18next. It doesn't contain arrays.
This page documents that arrays are supported within the JSON for keys.

To Reproduce

Not relevant, since it's a documentation error.

Expected behavior

The JSON format page includes arrays as supported format.

Your Environment

Not relevant, since it's a documentation error.

🚀 Feature Proposal

Adding dark mode to the documentation pages.

Motivation

Some users might find dark mode more convenient since it is easier to read for most people and consumes less battery. It would also make sense if the user's every other documentation page is in dark mode.

Example

N/A

I have followed steps for many online tutorials and I always get the following error:

TypeError: t is not a function

I'm using create-react-app to create the new application

• I created the il8n.js file.
• I then updated index.js to:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { I18nextProvider } from "react-i18next";
import i18n from "./i18n";
import App from './App';


ReactDOM.render(
    <I18nextProvider i18n={i18n}>
        <App />
    </I18nextProvider>, 
    document.getElementById('root')
);

• Next I addted a item in the app.js file

import React from 'react';
import logo from './logo.svg';
import './App.css';

const App = (props) => {
  const {t} = props;

  return (
    <div className="App">
      <header className="App-header">
        <p>React test</p>
      </header>
      <div>
      {t("Introduction")}
      </div>
    </div>
  );
}

export default App;

Here is my il8n.js file:

import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";

i18n.use(LanguageDetector).init({
  // we init with resources
  resources: {
    en: {
      translations: {
        Introduction: "Introduction",
        "is an internationalization-framework which offers a complete solution to localize your product from web to mobile and desktop":
          "is an internationalization-framework which offers a complete solution to localize your product from web to mobile and desktop",
        "Plugins to detect the user language":
          "Plugins to detect the user language",
        "Plugins to load translations": "Plugins to load translations",
        "Optionally cache the translations":
          "Optionally cache the translations",
        Advantages: "Advantages",
        "Flexibility to use other packages": "Flexibility to use other packages"
      }
    },
    jap: {
      translations: {
        Introduction: "前書き",
        "is an internationalization-framework which offers a complete solution to localize your product from web to mobile and desktop":
          "Webからモバイルとデスクトップに製品をローカライズするための完全なソリューションを提供する国際化フレームワークです",
        "Plugins to detect the user language":
          "ユーザー言語を検出するためのプラグイン",
        "Plugins to load translations": "翻訳をロードするためのプラグイン",
        "Optionally cache the translations": "必要に応じて翻訳をキャッシュする",
        Advantages: "利点",
        "Flexibility to use other packages": "他のパッケージを使用する柔軟性"
      }
    },

    hin: {
      translations: {
        Introduction: "प्रस्तावना",
        "is an internationalization-framework which offers a complete solution to localize your product from web to mobile and desktop":
          "एक अंतर्राष्ट्रीयकरण - ढांचा है जो आपके उत्पाद को वेब से मोबाइल और डेस्कटॉप पर स्थानांतरित करने का एक संपूर्ण समाधान प्रदान करता है",
        "Plugins to detect the user language":
          "उपयोगकर्ता भाषा का पता लगाने के लिए प्लगइन्स",
        "Plugins to load translations": "अनुवाद लोड करने के लिए प्लगइन्स",
        "Optionally cache the translations": "वैकल्पिक रूप से अनुवाद कैश करें",
        Advantages: "लाभ",
        "Flexibility to use other packages":
          "अन्य पैकेजों का उपयोग करने के लिए लचीलापन"
      }
    },

    ger: {
      translations: {
        Introduction: "Einführung",
        "is an internationalization-framework which offers a complete solution to localize your product from web to mobile and desktop":
          "ist ein Internationalisierungs-Framework, das eine Komplettlösung für die Lokalisierung Ihres Produkts vom Web auf das Handy und den Desktop bietet",
        "Plugins to detect the user language":
          "Plugins zur Erkennung der Benutzersprache",
        "Plugins to load translations": "Plugins zum Laden von Übersetzungen",
        "Optionally cache the translations":
          "Optional die Übersetzungen zwischenspeichern",
        Advantages: "Vorteile",
        "Flexibility to use other packages":
          "Flexibilität zur Verwendung anderer Pakete"
      }
    },
    fre: {
      translations: {
        Introduction: "Introduction",
        "is an internationalization-framework which offers a complete solution to localize your product from web to mobile and desktop":
          "est un cadre d'internationalisation qui offre une solution complète pour localiser votre produit du Web au mobile et au bureau",
        "Plugins to detect the user language":
          "Plugins pour détecter la langue de l'utilisateur",
        "Plugins to load translations": "Plugins pour charger les traductions",
        "Optionally cache the translations":
          "Cachez éventuellement les traductions",
        Advantages: "Les avantages",
        "Flexibility to use other packages":
          "Flexibilité d'utiliser d'autres packages"
      }
    }
  },
  fallbackLng: "en",
  debug: true,

  // have a common namespace used around the full app
  ns: ["translations"],
  defaultNS: "translations",

  keySeparator: false, // we use content as keys

  interpolation: {
    escapeValue: false, // not needed for react!!
    formatSeparator: ","
  },

  react: {
    wait: true
  }
});

export default i18n;

Any ideas why this won't work? Everything I've looked shows these same steps for basic functionality, but this keeps throwing an error.

I tried importing i18next and the backend into my project after installing it from npm, but when I run my project on a local server, I keep getting: Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Inside https://www.i18next.com/ page:

There is a broken link https://locize.com/blog/how-does-server-side-internationalization-look-like/jq

<a href="https://locize.com/blog/how-does-server-side-internationalization-look-like/jq" data-rnwi-5xr8s6-dse9kg-2fw26.....

🚀 Feature Proposal

i18next.init() returns a Promise which is a concept that is not easy to grasp for unexperienced developers or coming from other languages that don't have this concept. There is a beginner friendlier way to initialize i18next using initImmediate: false which makes it synchronous.

So my proposal is to either add a synchronous example to the getting started or at least mention the initImmediate configuration option for those looking for it.

If you find it a good idea, I can prepare a PR.

🐛 Bug Report

The migration guide at https://www.i18next.com/misc/migration-guide does not include up to the latest versions (v17-18, 18-19)

To Reproduce

https://www.i18next.com/misc/migration-guide

Expected behavior

There should be entries for the latest versions

The example for nesting has a hint reading:

Make sure the options string is valid JSON and can be parsed using JSON.parse

'sampleKey': 'test $t(nest2, { "changedVarName": "{{var}}" })'

However, the example right above it does not follow this advice.

{
      "girlsAndBoys": "$t(girls, {'count': {{girls}} }) and {{count}} boy",
      "girlsAndBoys_plural": "$t(girls, {'count': {{girls}} }) and {{count}} boys",
      "girls": "{{count}} girl",
      "girls_plural": "{{count}} girls"
}

{'count': {{girls}} } is not valid JSON.

🐛 Bug Report

Not sure how to better fix this (also because it would need further details from the packages), so I'm opening an issue instead:

• react.js description is a bit redundant
• there are a couple of repeated descriptions that don't help with selecting a lib (e.g. three Vue libs, two PHP libs with the same name + a fork)
• IIRC, Angular and Angular.js are two different-ish things?

Also, capitalization is all over the place:

• all JS frameworks look like JS files, while at least some of those don't really use .js as a suffix (React is just React, for instance)
• most abbreviations are in lower case (such as HTTP, PHP, HTML5)
• it seems this is actually a common pattern across multiple pages. However, while here and there it may seem like an oversight, on this page it's a bit jarring for the repetition.

Bonus: is this bug report template really meaningful for a docs repository? 🤔

🐛 Bug Report

https://github.com/i18next/i18next-gitbook/blame/master/overview/first-setup-help.md#L62-L63
these 2 lines has you can load translations from filesystem as link text which seems not expected according to the context

https://jsfiddle.net/jamuhl/3sL01fn0/#tabs=result - error in console: Uncaught TypeError: i18next.init is not a function

🐛 Bug Report

HttpApi doesn't work server side (I can't see translations on first page load)

To Reproduce

https://codesandbox.io/s/smoosh-thunder-o0fuw

just add plugin i18next-http-backend specify url to download translation

const NextI18Next = require('next-i18next').default;
import HttpApi from 'i18next-http-backend';
const { localeSubpaths } = require('next/config').default().publicRuntimeConfig;
const path = require('path');

module.exports = new NextI18Next({
  use: [HttpApi],
  backend: {
    loadPath: `https://pobeda37.io/api/gettranslate?lng={{lng}}&ns={{ns}}`,
    crossDomain: true
  },
  otherLanguages: ['de'],
  localeSubpaths,
  localePath: path.resolve('./public/static/locales')
});

Expected behavior

I expected translations to be loaded in the same way on the server side

Your Environment

• node v14.15.4
• i18next version: ^14.0.1
• os: Windows

Support PrimeReact framework components.

Please, specify, what behavior we will get if set both "language fallback" and "namespace fallback"?

🐛 Bug Report

Interpolation does not work if joinArray is not provided when you have an array of strings as value of key

To Reproduce

 
    "ArrayKey": [
      "Please, transfer {{amount}}, so we can proceed with your investment order.",
      "something",
    ],


const [t] = useTranslation();

const texts = t('ArrayKey', {
                    amount: '11',
                    returnObjects: true,
                  })

Expected behavior

Above I expect the texts to be an array of strings with amount to be replaced by 11. But the same doesn't happen

 [
      "Please, transfer 11, so we can proceed with your investment order.",
      "something",
    ]

Your Environment

• runtime version: node v14
• i18next version: 19.6.3
• os: Mac
• Using React Hook Library react-i18next

I have been trying to find how to incorporate html tags in keys, using interpolation. However, I could not get this to work.

"key": "<span class='{{class}}'>Organisor</span> subscription"

i18next.t('key',{ class: 'blue' });

This returns

[object, object]

What is the recommended way to manage HTML tags in keys ?

this resource "https://unpkg.com/i18next/i18next.min.js" stop working
are you guys planning on redirect it to the new cdn url?

I suggest to fix loadNamespaces to return t as specific namespace translations.

Also would be nice to add fallback translations to load from default:

Snippet im using currently:

i```
mport i18n from 'translations/i18n'; //initialized i18n
i18n.loadNamespaces('NAMESPACE');

const t = translationString => {
//try common namespace
const nsTranslation = i18n.t('NAMESPACE:' + translationString);
if(translationString === nsTranslation){
return i18n.t(translationString);
}
//else return namespaced translation
else{
return nsTranslation;
}
};

//t gets passed down as props to react components

I offer a library that I wrote instead of the library i18next-node-mongodb-backend for integration with MongoDB. I wrote a new library because there were authentication issues that had not been resolved in the previous library. If you are interested, please visit the i18next-node-mongo-backend repository.

Issue like i18next/i18next#2151 might result in adding new content to the documentation.

I'm not very familiar with git-book,
so I would like to know if it is possible to run the site on my local machine before opening a PR.

I found that a CLI was available but now is deprecated:
https://github.com/GitbookIO/gitbook-cli?tab=readme-ov-file#%EF%B8%8F-deprecation-warning

Recently I tried some static site generator tools to rebuild commitlint documentation (https://commitlint.js.org)

• VitePress (https://vitepress.dev)
• Rspress (https://rspress.dev)

They both allow you to build / preview static site locally but I assume that rebuilding the doc is not an option right now 😅.

If translated string is longer than original one, react shrinks string.

🐛 Bug Report

The JSFiddle linked from getting-started.md line 111 uses i18nextXHRBackend, which, according to the backend list, is deprecated.

To Reproduce

See the linked JSFiddle: https://jsfiddle.net/jamuhl/ferfywyf/#tabs=js,result,html

[source code](https://jsfiddle.net/jamuhl/ferfywyf/#tabs=js,result,html)

Expected behavior

Since it's part of the documentation for i18next, the provided example should use supported components.

I've forked the example and updated it to use i18nextHttpBackend instead.
The documentation can be changed to link to that, instead:

[source code](https://jsfiddle.net/Mogsdad/pxdcam51/2#tabs=js,result,html)

Alternatively, the original JSFiddle could be updated by jamuhl.

Your Environment

• n/a

https://www.i18next.com/translation-function/plurals

We have a project that support muti-languages.
And we use
{
"keyWithCount": "{{count}} item",
"keyWithCount_plural": "{{count}} items"
}

It works well for en/fr/de.
count = 1 return "key"
count = 2,3,4... return "key_plural"

But for ja/ko/zh-cn/zh-tw.
the code will return "key_0" no matter the count is.

My code is like this:
rules: {{count}} rule
rules_pural: {{count}} rules

For ja/ko/zh-cn/zh-tw,
It will use "rules: {{count}} rule" as it can't find key "rules_0".

Please help to advise how to solve my problem.

STR:

1. Go to https://www.i18next.com/translation-function/interpolation#unescape
2. Copy code snippets and run locally

Expected result:

// -> "no danger <img />"
// -> "dangerous <img />"
// -> "no danger <img />" (obviously could be dangerous)

Actual result:

no danger <img />
dangerous 
no danger <img />

I'm using this library using npm module like,
npm install i18next
npm install loc-i18next

the above npm packages have installed in my react application but I dont want to use "npm i react-i18next".

Here is the sample code,

1. LocalizationExample.js
   
   

2. en.json
   

3. de.js
   

Can you please tell me, how to pass username value to key_3 paramater?

and I have no idea what it originally showed.
https://github.com/i18next/i18next-gitbook/blob/master/overview/comparison-to-others.md
Line 129

🐛 Bug Report

Fallback string with the : (colon) punctuation mark extracts only parts of it.

To Reproduce

Use the i18next.t(keys, options) function with an undefined key.

i18next.t('Undefined variable: $example')
// Output is: " $example"

Expected behavior

If the key is not defined in the translation file, it should return the string itself, as per the doc.

"Undefined variable: $example"

Your Environment

• runtime version: node v.14.0
• i18next version: 20.3.3
• os: Mac

🚀 Feature Proposal

The ability to change to default Translation Resolution from key, language, namespace to key, namespace, language

Motivation

This will help us use the same language from another namespace instead of display translation in another language.

Example

How it is now:

• Check in en-common
• Check in de-common
• Check in en-custom
• Check in de-custom

How should work:
If it can not be found in en-common, it should search for another namespace but still with en language.
Example:

• Check in en-common
• Check in en-custom
• Check in de-common
• Check in de-custom

I had to read the source code to determine how i18next.languages is set and used; I can make a PR if preferred, but I'm not 100% confident that my documentation will be technically accurate, as I've only spent a few minutes reading the code.

I am considering rewriting it as such:

i18next.languages
Is set to an array of language-codes that will be used in order to lookup the translation value.
When the language is set, this array is populated with the new language code, which by default falls back to the less specific versions ("en-US-xx", "en-US", "en"), followed by the list of fallback codes.
Values are unique, so if they appear earlier in the array, they will not be added again.

Example:
> i18next.init({ fallbackLng: ["es", "fr", "en-US"] })
> i18next.changeLanguage("en-US-xx")
> i18next.languages
> ["en-US-xx", "en-US", "en", "es", "fr"]

Please let me know your thoughts.

I'll send a PR shortly.

Related: i18next/i18next#908 (comment)

Unfortunately, at today afternoon the plugin doesn’t work at all. Maybe you updated it... The plugin downloaded, but i always get an i18next undefined message. Earlier, the website worked fine with i18next. Besides this, your examples in your i18next.com don’t work too. Could you check it? Thanks, viktor

Hi,

I've created a simple Construct 3 plugin to use i18next in Construct 3. How could I get the the plugin listed in the docs?

You can find the plugin's repo here: https://github.com/nagyv/c3-i18next/

Moreover, I would like to ask you if you permit the use of your logo the way I did. It mixes C3 logo with yours in an extremely simple way. (I'm not a designer. :)) You can check the logo here: https://www.construct.net/en/make-games/addons/249/c3-i18next