CHANGELOG.md

@@ -1,3 +1,7 @@
+### 12.1.2
+
+- fix crash in gatsby [1594](https://github.com/i18next/react-i18next/issues/1594)
+
 ### 12.1.1
 
 - fix for node resolution [1589](https://github.com/i18next/react-i18next/issues/1589)

example/locize/package.json

@@ -3,15 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "i18next": "21.0.0",
-    "i18next-browser-languagedetector": "6.1.1",
-    "i18next-locize-backend": "4.2.2",
-    "locize": "2.2.4",
-    "locize-lastused": "3.0.12",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-i18next": "11.10.0",
-    "react-scripts": "^4.0.3"
+    "i18next": "22.1.2",
+    "i18next-browser-languagedetector": "7.0.1",
+    "i18next-locize-backend": "6.0.1",
+    "locize": "2.4.5",
+    "locize-lastused": "3.1.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-i18next": "12.1.1",
+    "react-scripts": "5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

example/locize/src/index.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import './index.css';
 import App from './App';
 
 // import i18n (needs to be bundled ;))
 import './i18n';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);

example/react-typescript/simple-multi-namespaces/package.json

@@ -3,16 +3,16 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "i18next": "^22.0.4",
+    "i18next": "^22.4.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^12.0.0"
+    "react-i18next": "^12.1.1"
   },
   "devDependencies": {
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.8",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
     "react-scripts": "5.0.1",
-    "typescript": "^4.8.4"
+    "typescript": "^4.9.4"
   },
   "scripts": {
     "start": "react-scripts start",

example/react-typescript/simple/package.json

@@ -3,16 +3,16 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "i18next": "^22.0.4",
+    "i18next": "^22.4.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^12.0.0"
+    "react-i18next": "^12.1.1"
   },
   "devDependencies": {
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.8",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
     "react-scripts": "5.0.1",
-    "typescript": "^4.8.4"
+    "typescript": "^4.9.4"
   },
   "scripts": {
     "start": "react-scripts start",

example/react-typescript/simple/src/App.tsx

@@ -2,11 +2,11 @@ import './i18n/config';
 import { useTranslation } from 'react-i18next';
 
 function App() {
-  const {t} = useTranslation();
+  const { t } = useTranslation();
 
   return (
     <div className="App">
-      <p>{t('title')}</p>
+      <p>{t('title', { name: 'John' })}</p>
       <p>{t('description.part1')}</p>
       <p>{t('description.part2')}</p>
     </div>

example/react-typescript/simple/src/i18n/en/translation.json

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

example/react/package.json

@@ -3,12 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "i18next": "21.6.16",
-    "i18next-browser-languagedetector": "6.1.4",
-    "i18next-http-backend": "1.4.0",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
-    "react-i18next": "11.16.7",
+    "i18next": "22.1.2",
+    "i18next-browser-languagedetector": "7.0.1",
+    "i18next-http-backend": "2.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-i18next": "12.1.1",
     "react-scripts": "5.0.1"
   },
   "scripts": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-i18next",
-  "version": "12.1.1",
+  "version": "12.1.2",
   "description": "Internationalization for react done right. Using the i18next i18n ecosystem.",
   "main": "dist/commonjs/index.js",
   "types": "./index.d.ts",
@@ -42,7 +42,7 @@
     "url": "https://github.com/i18next/react-i18next.git"
   },
   "dependencies": {
-    "@babel/runtime": "^7.14.5",
+    "@babel/runtime": "^7.20.6",
     "html-parse-stringify": "^3.0.1"
   },
   "devDependencies": {
@@ -78,7 +78,7 @@
     "eslint-plugin-react": "^7.16.0",
     "eslint-plugin-testing-library": "^3.10.1",
     "husky": "^3.0.3",
-    "i18next": "^22.0.1",
+    "i18next": "^22.4.3",
     "jest": "^24.8.0",
     "jest-cli": "^24.8.4",
     "lint-staged": "^8.1.3",

react-i18next.js

@@ -808,7 +808,7 @@
 
     var i18n = i18nFromProps || i18nFromContext || getI18n();
 
-    var t = tFromProps || i18n.t.bind(i18n) || function (k) {
+    var t = tFromProps || i18n && i18n.t.bind(i18n) || function (k) {
       return k;
     };
 
@@ -822,7 +822,7 @@
       values: values,
       defaults: defaults,
       components: components,
-      ns: ns || t.ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS,
+      ns: ns || t.ns || defaultNSFromContext || i18n && i18n.options && i18n.options.defaultNS,
       i18n: i18n,
       t: tFromProps,
       shouldUnescape: shouldUnescape

src/Trans.js

@@ -23,7 +23,7 @@ export function Trans({
   const { i18n: i18nFromContext, defaultNS: defaultNSFromContext } = useContext(I18nContext) || {};
   const i18n = i18nFromProps || i18nFromContext || getI18n();
 
-  const t = tFromProps || i18n.t.bind(i18n) || ((k) => k);
+  const t = tFromProps || (i18n && i18n.t.bind(i18n)) || ((k) => k);
 
   return TransWithoutContext({
     children,
@@ -36,7 +36,7 @@ export function Trans({
     defaults,
     components,
     // prepare having a namespace
-    ns: ns || t.ns || defaultNSFromContext || (i18n.options && i18n.options.defaultNS),
+    ns: ns || t.ns || defaultNSFromContext || (i18n && i18n.options && i18n.options.defaultNS),
     i18n,
     t: tFromProps,
     shouldUnescape,

test/typescript/custom-types/Translation.test.tsx

@@ -36,11 +36,6 @@ function expectErrorWhenKeyNotInNamespace() {
   return <Translation ns="custom">{(t) => <>{t('fake')}</>}</Translation>;
 }
 
-function expectErrorWhenUsingArrayNamespaceAndUnscopedKey() {
-  // @ts-expect-error
-  return <Translation ns={['custom']}>{(t) => <>{t('foo')}</>}</Translation>;
-}
-
 function expectErrorWhenUsingArrayNamespaceAndWrongKey() {
   // @ts-expect-error
   return <Translation ns={['custom']}>{(t) => <>{t('custom:fake')}</>}</Translation>;

test/typescript/custom-types/useTranslation.test.tsx

@@ -22,7 +22,9 @@ function arrayNamespace() {
   return (
     <>
       {t('alternate:baz')}
+      {t('baz', { ns: 'alternate' })}
       {t('custom:foo')}
+      {t('foo', { ns: 'custom' })}
     </>
   );
 }
@@ -33,7 +35,9 @@ function readonlyArrayNamespace() {
   return (
     <>
       {t('alternate:baz')}
+      {t('baz', { ns: 'alternate' })}
       {t('custom:foo')}
+      {t('foo', { ns: 'custom' })}
     </>
   );
 }
@@ -47,7 +51,7 @@ function deepKeyPrefixOption() {
   const [t] = useTranslation('alternate', { keyPrefix: 'foobar.deep' });
   return (
     <>
-      {t('deeper').deeeeeper}
+      {t('deeper', { returnObjects: true }).deeeeeper}
       {t('deeper.deeeeeper')}
     </>
   );
@@ -75,16 +79,12 @@ function expectErrorWhenKeyNotInNamespace() {
   return <>{t('fake')}</>;
 }
 
-function expectErrorWhenUsingArrayNamespaceAndUnscopedKey() {
-  const [t] = useTranslation(['custom']);
-  // @ts-expect-error
-  return <>{t('foo')}</>;
-}
-
 function expectErrorWhenUsingArrayNamespaceAndWrongKey() {
   const [t] = useTranslation(['custom']);
   // @ts-expect-error
-  return <>{t('custom:fake')}</>;
+  <>{t('custom:fake')}</>;
+  // @ts-expect-error
+  return <>{t('fake', { ns: 'custom' })}</>;
 }
 
 function expectErrorWhenUsingWrongKeyPrefixOption() {