react-i18next 17.0.9 → 17.0.11

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## 17.0.11
+
+- chore: `html-parse-stringify` updated to `^4.0.1`. The parser powering `<Trans>` is now actively maintained under the i18next org ([i18next/html-parse-stringify](https://github.com/i18next/html-parse-stringify)) after years without upstream releases. 4.x brings modern dual ESM/CJS packaging with an `exports` map, zero runtime dependencies, reworked TypeScript types and a long list of parser fixes (literal `<` in text, multiline/CRLF attribute values, comments containing `>`, doctype handling, quote-aware bracket handling).
+- refactor(Trans): the internal `escapeLiteralLessThan` scanner (~80 lines) is replaced by the parser's new `allowedTags` option with identical semantics: only numbered tags, kept basic HTML tags and known component names are parsed as markup, any other tag-shaped sequence in the translation stays literal text. Rendered output is unchanged (all 493 tests pass, including the [#1880](https://github.com/i18next/react-i18next/issues/1880) and [#1893](https://github.com/i18next/react-i18next/issues/1893) escaping cases).
+
+## 17.0.10
+
+- fix(warnings): the `useTranslation` and `Trans` "You will need to pass in an i18next instance" warnings now match the `useSSR` wording, mentioning the props/context alternatives and the most common unexplained cause at scale: duplicate react-i18next copies in monorepo setups. The `Trans` variant also referenced the internal `i18nextReactModule` name; it now points to the public `initReactI18next` API.
+- feat(warnings): development-only warning (`SUSPENDED_WHILE_LOADING`, logged once) right before `useTranslation` suspends while translations are loading. With the default `useSuspense: true` and no `<Suspense>` boundary this previously surfaced as a blank screen or a cryptic React error; the warning now names both fixes (add a `<Suspense>` boundary or set `react.useSuspense: false`). No-op in production builds; the `process.env.NODE_ENV` check is wrapped so runtimes without a `process` global (raw ESM in the browser, some edge runtimes) stay silent instead of throwing.
+- ci: weekly workflow typechecking the test suite against `@types/react@next` / `@types/react-dom@next`, so the next React major's type changes (like the React 18 `TFunctionResult`/children wave) surface before user reports.
+
 ## 17.0.9
 
 - fix: allow TypeScript 7 in the optional `typescript` peer dependency range (`^5 || ^6 || ^7`). With `typescript@7.0.2` in a project, `npm install` failed with an `ERESOLVE` peer conflict. Fixes [#1927](https://github.com/i18next/react-i18next/issues/1927), thanks @andikapradanaarif.

package/TransWithoutContext.d.ts

@@ -128,7 +128,8 @@ export type ErrorCode =
   | 'TRANS_INVALID_OBJ'
   | 'TRANS_INVALID_VAR'
   | 'TRANS_INVALID_COMPONENTS'
-  | 'USE_T_BEFORE_READY';
+  | 'USE_T_BEFORE_READY'
+  | 'SUSPENDED_WHILE_LOADING';
 
 export type ErrorMeta = {
   code: ErrorCode;

package/dist/amd/react-i18next.js

@@ -93,7 +93,7 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
   const deepExtend = (target, source, overwrite) => {
     for (const prop in source) {
       if (prop !== '__proto__' && prop !== 'constructor') {
-        if (prop in target) {
+        if (Object.prototype.hasOwnProperty.call(target, prop)) {
           if (isString$1(target[prop]) || target[prop] instanceof String || isString$1(source[prop]) || source[prop] instanceof String) {
             if (overwrite) target[prop] = source[prop];
           } else {
@@ -457,11 +457,15 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
     } = selector(createProxy());
     const keySeparator = opts?.keySeparator ?? '.';
     const nsSeparator = opts?.nsSeparator ?? ':';
+    const strict = opts?.enableSelector === 'strict';
     if (path.length > 1 && nsSeparator) {
       const ns = opts?.ns;
-      const nsArray = Array.isArray(ns) ? ns : null;
-      if (nsArray && nsArray.length > 1 && nsArray.slice(1).includes(path[0])) {
-        return `${path[0]}${nsSeparator}${path.slice(1).join(keySeparator)}`;
+      const nsList = strict ? Array.isArray(ns) ? ns : ns ? [ns] : null : Array.isArray(ns) ? ns : null;
+      if (nsList) {
+        const candidates = strict ? nsList : nsList.length > 1 ? nsList.slice(1) : [];
+        if (candidates.includes(path[0])) {
+          return `${path[0]}${nsSeparator}${path.slice(1).join(keySeparator)}`;
+        }
       }
     }
     return path.join(keySeparator);
@@ -873,7 +877,10 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
       const useOptionsReplaceForData = options.replace && !isString$1(options.replace);
       let data = useOptionsReplaceForData ? options.replace : options;
       if (useOptionsReplaceForData && typeof options.count !== 'undefined') {
-        data.count = options.count;
+        data = {
+          ...data,
+          count: options.count
+        };
       }
       if (this.options.interpolation.defaultVariables) {
         data = {
@@ -1183,10 +1190,10 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
       const skipOnVariables = options?.interpolation?.skipOnVariables !== undefined ? options.interpolation.skipOnVariables : this.options.interpolation.skipOnVariables;
       const todos = [{
         regex: this.regexpUnescape,
-        safeValue: val => regexSafe(val)
+        safeValue: val => val
       }, {
         regex: this.regexp,
-        safeValue: val => this.escapeValue ? regexSafe(this.escape(val)) : regexSafe(val)
+        safeValue: val => this.escapeValue ? this.escape(val) : val
       }];
       todos.forEach(todo => {
         replaces = 0;
@@ -1210,9 +1217,9 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
             value = makeString(value);
           }
           const safeValue = todo.safeValue(value);
-          str = str.replace(match[0], safeValue);
+          str = str.replace(match[0], regexSafe(safeValue));
           if (skipOnVariables) {
-            todo.regex.lastIndex += value.length;
+            todo.regex.lastIndex += safeValue.length;
             todo.regex.lastIndex -= match[0].length;
           } else {
             todo.regex.lastIndex = 0;
@@ -1262,7 +1269,7 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
         clonedOptions = clonedOptions.replace && !isString$1(clonedOptions.replace) ? clonedOptions.replace : clonedOptions;
         clonedOptions.applyPostProcessor = false;
         delete clonedOptions.defaultValue;
-        const keyEndIndex = /{.*}/.test(match[1]) ? match[1].lastIndexOf('}') + 1 : match[1].indexOf(this.formatSeparator);
+        const keyEndIndex = /{.*}/s.test(match[1]) ? match[1].lastIndexOf('}') + 1 : match[1].indexOf(this.formatSeparator);
         if (keyEndIndex !== -1) {
           formatters = match[1].slice(keyEndIndex).split(this.formatSeparator).map(elem => elem.trim()).filter(Boolean);
           match[1] = match[1].slice(0, keyEndIndex);
@@ -1391,10 +1398,14 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
     format(value, format, lng, options = {}) {
       if (!format) return value;
       if (value == null) return value;
-      const formats = format.split(this.formatSeparator);
-      if (formats.length > 1 && formats[0].indexOf('(') > 1 && !formats[0].includes(')') && formats.find(f => f.includes(')'))) {
-        const lastIndex = formats.findIndex(f => f.includes(')'));
-        formats[0] = [formats[0], ...formats.splice(1, lastIndex)].join(this.formatSeparator);
+      const rawFormats = format.split(this.formatSeparator);
+      const formats = [];
+      for (let i = 0; i < rawFormats.length; i++) {
+        let f = rawFormats[i];
+        while (f.indexOf('(') > -1 && !f.includes(')') && i + 1 < rawFormats.length) {
+          f = `${f}${this.formatSeparator}${rawFormats[++i]}`;
+        }
+        formats.push(f);
       }
       const result = formats.reduce((mem, f) => {
         const {
@@ -1653,6 +1664,7 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
     nsSeparator: ':',
     pluralSeparator: '_',
     contextSeparator: '_',
+    enableSelector: false,
     partialBundledLanguages: false,
     saveMissing: false,
     updateMissing: false,
@@ -2229,127 +2241,318 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
   instance.loadNamespaces;
   instance.loadLanguages;
 
-  function getDefaultExportFromCjs (x) {
-  	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+  const voidElements = {
+    area: true,
+    base: true,
+    br: true,
+    col: true,
+    embed: true,
+    hr: true,
+    img: true,
+    input: true,
+    link: true,
+    meta: true,
+    param: true,
+    source: true,
+    track: true,
+    wbr: true,
+    '!doctype': true,
+    '!DOCTYPE': true
+  };
+  const attrRE = /\s([^'"/\s><]+?)[\s/>]|([^\s=]+)=\s?("[^"]*"|'[^']*')/g;
+  function parseTag(tag) {
+    const res = {
+      type: 'tag',
+      name: '',
+      voidElement: false,
+      attrs: {},
+      children: []
+    };
+    const tagMatch = tag.match(/<\/?([^\s]+?)[/\s>]/);
+    if (tagMatch) {
+      res.name = tagMatch[1];
+      if (voidElements[tagMatch[1]] || tag.charAt(tag.length - 2) === '/') {
+        res.voidElement = true;
+      }
+      if (res.name.startsWith('!--')) {
+        const endIndex = tag.indexOf('-->');
+        return {
+          type: 'comment',
+          comment: endIndex !== -1 ? tag.slice(4, endIndex) : ''
+        };
+      }
+    }
+    const reg = new RegExp(attrRE);
+    let result = null;
+    for (;;) {
+      result = reg.exec(tag);
+      if (result === null) {
+        break;
+      }
+      if (!result[0].trim()) {
+        continue;
+      }
+      if (result[1]) {
+        const attr = result[1].trim();
+        let arr = [attr, null];
+        const eq = attr.indexOf('=');
+        if (eq > -1) {
+          arr = [attr.slice(0, eq), attr.slice(eq + 1)];
+        }
+        res.attrs[arr[0]] = arr[1];
+        reg.lastIndex--;
+      } else if (result[2]) {
+        res.attrs[result[2]] = result[3].trim().substring(1, result[3].length - 1);
+      }
+    }
+    return res;
   }
-
-  var voidElements;
-  var hasRequiredVoidElements;
-
-  function requireVoidElements () {
-  	if (hasRequiredVoidElements) return voidElements;
-  	hasRequiredVoidElements = 1;
-  	voidElements = {
-  	  "area": true,
-  	  "base": true,
-  	  "br": true,
-  	  "col": true,
-  	  "embed": true,
-  	  "hr": true,
-  	  "img": true,
-  	  "input": true,
-  	  "link": true,
-  	  "meta": true,
-  	  "param": true,
-  	  "source": true,
-  	  "track": true,
-  	  "wbr": true
-  	};
-  	return voidElements;
+  const tagRE = /<!--[\s\S]*?-->|<[a-zA-Z0-9\-!/](?:"[^"]*"|'[^']*'|[^'">])*>/g;
+  const tagNameRE = /<\/?([^\s]+?)[/\s>]/;
+  const whitespaceRE = /^\s*$/;
+  const rawTextRE = /^(script|style)$/i;
+  const sentinel = '\u0000';
+  const empty = Object.create(null);
+  function restoreSentinels(nodes) {
+    nodes.forEach(function (node) {
+      if (node.type === 'text') {
+        node.content = node.content.split(sentinel).join('<');
+        return;
+      }
+      if (node.type === 'comment') {
+        node.comment = node.comment.split(sentinel).join('<');
+        return;
+      }
+      for (const key in node.attrs) {
+        const value = node.attrs[key];
+        if (typeof value === 'string' && value.indexOf(sentinel) > -1) {
+          node.attrs[key] = value.split(sentinel).join('<');
+        }
+      }
+      if (node.children.length) {
+        restoreSentinels(node.children);
+      }
+    });
   }
-
-  var voidElementsExports = requireVoidElements();
-  var e = /*@__PURE__*/getDefaultExportFromCjs(voidElementsExports);
-
-  var t = /\s([^'"/\s><]+?)[\s/>]|([^\s=]+)=\s?(".*?"|'.*?')/g;
-  function n(n) {
-    var r = {
-        type: "tag",
-        name: "",
-        voidElement: false,
-        attrs: {},
-        children: []
-      },
-      i = n.match(/<\/?([^\s]+?)[/\s>]/);
-    if (i && (r.name = i[1], (e[i[1]] || "/" === n.charAt(n.length - 2)) && (r.voidElement = true), r.name.startsWith("!--"))) {
-      var s = n.indexOf("--\x3e");
-      return {
-        type: "comment",
-        comment: -1 !== s ? n.slice(4, s) : ""
+  function parse(html, options) {
+    const components = options && options.components || empty;
+    const allowedTags = options && options.allowedTags;
+    let restoreNeeded = false;
+    if (allowedTags) {
+      const isAllowed = typeof allowedTags === 'function' ? allowedTags : function (name) {
+        return allowedTags.indexOf(name) > -1;
       };
+      let out = '';
+      let pos = 0;
+      tagRE.lastIndex = 0;
+      let am;
+      while (am = tagRE.exec(html)) {
+        const tag = am[0];
+        out += html.slice(pos, am.index);
+        const nameMatch = tag.match(tagNameRE);
+        if (tag.startsWith('<!--') || nameMatch && isAllowed(nameMatch[1])) {
+          out += tag;
+          pos = am.index + tag.length;
+        } else {
+          restoreNeeded = true;
+          out += sentinel;
+          pos = am.index + 1;
+          tagRE.lastIndex = pos;
+        }
+      }
+      html = out + html.slice(pos);
     }
-    for (var a = new RegExp(t), c = null; null !== (c = a.exec(n));) if (c[0].trim()) if (c[1]) {
-      var o = c[1].trim(),
-        l = [o, ""];
-      o.indexOf("=") > -1 && (l = o.split("=")), r.attrs[l[0]] = l[1], a.lastIndex--;
-    } else c[2] && (r.attrs[c[2]] = c[3].trim().substring(1, c[3].length - 1));
-    return r;
-  }
-  var r = /<[a-zA-Z0-9\-\!\/](?:"[^"]*"|'[^']*'|[^'">])*>/g,
-    i = /^\s*$/,
-    s = Object.create(null);
-  function a(e, t) {
-    switch (t.type) {
-      case "text":
-        return e + t.content;
-      case "tag":
-        return e += "<" + t.name + (t.attrs ? function (e) {
-          var t = [];
-          for (var n in e) t.push(n + '="' + e[n] + '"');
-          return t.length ? " " + t.join(" ") : "";
-        }(t.attrs) : "") + (t.voidElement ? "/>" : ">"), t.voidElement ? e : e + t.children.reduce(a, "") + "</" + t.name + ">";
-      case "comment":
-        return e + "\x3c!--" + t.comment + "--\x3e";
+    const result = [];
+    const arr = [];
+    let current;
+    let level = -1;
+    let inComponent = false;
+    let rawUntil = 0;
+    let htmlLower;
+    if (html.indexOf('<') !== 0) {
+      const end = html.indexOf('<');
+      result.push({
+        type: 'text',
+        content: end === -1 ? html : html.substring(0, end)
+      });
     }
-  }
-  var c = {
-    parse: function (e, t) {
-      t || (t = {}), t.components || (t.components = s);
-      var a,
-        c = [],
-        o = [],
-        l = -1,
-        m = false;
-      if (0 !== e.indexOf("<")) {
-        var u = e.indexOf("<");
-        c.push({
-          type: "text",
-          content: -1 === u ? e : e.substring(0, u)
-        });
+    const matches = [];
+    let m;
+    while (m = tagRE.exec(html)) {
+      matches.push(m);
+    }
+    matches.forEach(function (match, i) {
+      const tag = match[0];
+      if (!tag) return;
+      if (tag.startsWith('<!--')) return;
+      let lts = 0;
+      let gts = 0;
+      let secondLt = -1;
+      let quote = null;
+      for (let j = 0; j < tag.length; j++) {
+        const c = tag.charAt(j);
+        if (quote) {
+          if (c === quote) quote = null;
+        } else if (c === '"' || c === "'") {
+          quote = c;
+        } else if (c === '<') {
+          lts++;
+          if (lts === 2) secondLt = j;
+        } else if (c === '>') {
+          gts++;
+        }
+      }
+      const validSplit = secondLt > -1 && /[a-zA-Z0-9\-!/]/.test(tag.charAt(secondLt + 1));
+      if (lts > gts && validSplit) {
+        const firstPart = tag.substring(0, secondLt);
+        const secondPart = tag.substring(firstPart.length);
+        matches[i][0] = secondPart;
+        matches[i].index += firstPart.length;
       }
-      return e.replace(r, function (r, s) {
-        if (m) {
-          if (r !== "</" + a.name + ">") return;
-          m = false;
-        }
-        var u,
-          f = "/" !== r.charAt(1),
-          h = r.startsWith("\x3c!--"),
-          p = s + r.length,
-          d = e.charAt(p);
-        if (h) {
-          var v = n(r);
-          return l < 0 ? (c.push(v), c) : ((u = o[l]).children.push(v), c);
-        }
-        if (f && (l++, "tag" === (a = n(r)).type && t.components[a.name] && (a.type = "component", m = true), a.voidElement || m || !d || "<" === d || a.children.push({
-          type: "text",
-          content: e.slice(p, e.indexOf("<", p))
-        }), 0 === l && c.push(a), (u = o[l - 1]) && u.children.push(a), o[l] = a), (!f || a.voidElement) && (l > -1 && (a.voidElement || a.name === r.slice(2, -1)) && (l--, a = -1 === l ? c : o[l]), !m && "<" !== d && d)) {
-          u = -1 === l ? c : o[l].children;
-          var x = e.indexOf("<", p),
-            g = e.slice(p, -1 === x ? void 0 : x);
-          i.test(g) && (g = " "), (x > -1 && l + u.length >= 0 || " " !== g) && u.push({
-            type: "text",
-            content: g
+    });
+    matches.forEach(function (match, i) {
+      const tag = match[0];
+      if (!tag) return;
+      const index = match.index;
+      if (index < rawUntil) return;
+      if (inComponent) {
+        if (tag !== '</' + current.name + '>') {
+          return;
+        } else {
+          inComponent = false;
+        }
+      }
+      const isOpen = tag.charAt(1) !== '/';
+      const isComment = tag.startsWith('<!--');
+      const start = index + tag.length;
+      const nextChar = html.charAt(start);
+      const nextMatch = matches[i + 1];
+      let isText;
+      if (nextChar === '<' && nextMatch) {
+        const nextTag = html.substring(start, nextMatch.index);
+        isText = nextTag.split('<').length > nextTag.split('>').length;
+      }
+      let parent;
+      if (isComment) {
+        const comment = parseTag(tag);
+        if (level < 0) {
+          result.push(comment);
+          return result;
+        }
+        parent = arr[level];
+        parent.children.push(comment);
+        const text = html.slice(start, nextMatch ? nextMatch.index : undefined);
+        if (text.length > 0) {
+          parent.children.push({
+            type: 'text',
+            content: text
           });
         }
-      }), c;
-    },
-    stringify: function (e) {
-      return e.reduce(function (e, t) {
-        return e + a("", t);
-      }, "");
+        return result;
+      }
+      if (isOpen) {
+        level++;
+        current = parseTag(tag);
+        if (current.type === 'tag' && components[current.name]) {
+          current.type = 'component';
+          inComponent = true;
+        }
+        let isRawText = false;
+        if (!inComponent && !current.voidElement && rawTextRE.test(current.name)) {
+          isRawText = true;
+          htmlLower || (htmlLower = html.toLowerCase());
+          const closeIndex = htmlLower.indexOf('</' + current.name.toLowerCase() + '>', start);
+          const contentEnd = closeIndex === -1 ? html.length : closeIndex;
+          const content = html.slice(start, contentEnd);
+          if (content) {
+            current.children.push({
+              type: 'text',
+              content
+            });
+          }
+          rawUntil = contentEnd;
+        }
+        if (!current.voidElement && !inComponent && !isRawText && nextChar && nextChar !== '<') {
+          current.children.push({
+            type: 'text',
+            content: html.slice(start, nextMatch ? nextMatch.index : undefined)
+          });
+        }
+        if (level === 0) {
+          result.push(current);
+        }
+        parent = arr[level - 1];
+        if (parent) {
+          parent.children.push(current);
+        }
+        arr[level] = current;
+      }
+      if (!isOpen || current.voidElement) {
+        if (level > -1 && (current.voidElement || current.name === tag.slice(2, -1))) {
+          level--;
+          current = level === -1 ? result : arr[level];
+        }
+        if (!inComponent && (nextChar !== '<' || isText) && nextChar) {
+          parent = level === -1 ? result : arr[level].children;
+          const end = nextMatch ? nextMatch.index : -1;
+          let content = html.slice(start, end === -1 ? undefined : end);
+          if (whitespaceRE.test(content)) {
+            content = ' ';
+          }
+          if (end > -1 && level + parent.length >= 0 || content !== ' ') {
+            parent.push({
+              type: 'text',
+              content
+            });
+          }
+        }
+      }
+    });
+    if (restoreNeeded) {
+      restoreSentinels(result);
+    }
+    return result;
+  }
+  function attrString(attrs) {
+    const buff = [];
+    for (const key in attrs) {
+      if (attrs[key] === null) {
+        buff.push(key);
+      } else {
+        buff.push(key + '="' + String(attrs[key]).replace(/"/g, '&quot;') + '"');
+      }
     }
+    if (!buff.length) {
+      return '';
+    }
+    return ' ' + buff.join(' ');
+  }
+  function stringifyNode(buff, doc) {
+    switch (doc.type) {
+      case 'text':
+        return buff + doc.content;
+      case 'tag':
+        {
+          const tagEnd = doc.voidElement && doc.name.toLowerCase() !== '!doctype' ? '/>' : '>';
+          buff += '<' + doc.name + (doc.attrs ? attrString(doc.attrs) : '') + tagEnd;
+          if (doc.voidElement) {
+            return buff;
+          }
+          return buff + doc.children.reduce(stringifyNode, '') + '</' + doc.name + '>';
+        }
+      case 'comment':
+        buff += '<!--' + doc.comment + '-->';
+        return buff;
+    }
+  }
+  function stringify(doc) {
+    return doc.reduce(function (token, rootEl) {
+      return token + stringifyNode('', rootEl);
+    }, '');
+  }
+  var index = {
+    parse,
+    stringify
   };
 
   const warn = (i18n, code, msg, rest) => {
@@ -2567,46 +2770,6 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
     });
     return stringNode;
   };
-  const escapeLiteralLessThan = (str, keepArray = [], knownComponentsMap = {}) => {
-    if (!str) return str;
-    const knownNames = Object.keys(knownComponentsMap);
-    const allValidNames = [...keepArray, ...knownNames];
-    let result = '';
-    let i = 0;
-    while (i < str.length) {
-      if (str[i] === '<') {
-        let isValidTag = false;
-        const closingMatch = str.slice(i).match(/^<\/(\d+|[a-zA-Z][a-zA-Z0-9_-]*)>/);
-        if (closingMatch) {
-          const tagName = closingMatch[1];
-          if (/^\d+$/.test(tagName) || allValidNames.includes(tagName)) {
-            isValidTag = true;
-            result += closingMatch[0];
-            i += closingMatch[0].length;
-          }
-        }
-        if (!isValidTag) {
-          const openingMatch = str.slice(i).match(/^<(\d+|[a-zA-Z][a-zA-Z0-9_-]*)(\s+[\w-]+(?:=(?:"[^"]*"|'[^']*'|[^\s>]+))?)*\s*(\/)?>/);
-          if (openingMatch) {
-            const tagName = openingMatch[1];
-            if (/^\d+$/.test(tagName) || allValidNames.includes(tagName)) {
-              isValidTag = true;
-              result += openingMatch[0];
-              i += openingMatch[0].length;
-            }
-          }
-        }
-        if (!isValidTag) {
-          result += '&lt;';
-          i += 1;
-        }
-      } else {
-        result += str[i];
-        i += 1;
-      }
-    }
-    return result;
-  };
   const renderNodes = (children, knownComponentsMap, targetString, i18n, i18nOptions, combinedTOpts, shouldUnescape) => {
     if (targetString === '') return [];
     const keepArray = i18nOptions.transKeepBasicHtmlNodesFor || [];
@@ -2621,8 +2784,11 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
       });
     };
     getData(children);
-    const escapedString = escapeLiteralLessThan(targetString, keepArray, data);
-    const ast = c.parse(`<0>${escapedString}</0>`);
+    const knownNames = Object.keys(data);
+    const allowedTags = name => /^\d+$/.test(name) || keepArray.indexOf(name) > -1 || knownNames.indexOf(name) > -1;
+    const ast = index.parse(`<0>${targetString}</0>`, {
+      allowedTags
+    });
     const opts = {
       ...data,
       ...combinedTOpts
@@ -2827,7 +2993,7 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
   }) {
     const i18n = i18nFromProps || getI18n();
     if (!i18n) {
-      warnOnce(i18n, 'NO_I18NEXT_INSTANCE', `Trans: You need to pass in an i18next instance using i18nextReactModule`, {
+      warnOnce(i18n, 'NO_I18NEXT_INSTANCE', `Trans: You need to pass in an i18next instance using initReactI18next or by passing it via props or context. In monorepo setups, make sure there is only one instance of react-i18next.`, {
         i18nKey
       });
       return children;
@@ -3575,7 +3741,7 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
     const i18n = i18nFromProps || i18nFromContext || getI18n();
     if (i18n && !i18n.reportNamespaces) i18n.reportNamespaces = new ReportNamespaces();
     if (!i18n) {
-      warnOnce(i18n, 'NO_I18NEXT_INSTANCE', 'useTranslation: You will need to pass in an i18next instance by using initReactI18next');
+      warnOnce(i18n, 'NO_I18NEXT_INSTANCE', 'useTranslation: You will need to pass in an i18next instance by using initReactI18next or by passing it via props or context. In monorepo setups, make sure there is only one instance of react-i18next.');
     }
     const i18nOptions = React.useMemo(() => ({
       ...getDefaults(),
@@ -3697,6 +3863,13 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
       return arr;
     }, [t, finalI18n, ready, finalI18n.resolvedLanguage, finalI18n.language, finalI18n.languages]);
     if (i18n && useSuspense && !ready) {
+      let inDevelopment = false;
+      try {
+        inDevelopment = "development" !== 'production';
+      } catch (e) {}
+      if (inDevelopment) {
+        warnOnce(i18n, 'SUSPENDED_WHILE_LOADING', 'useTranslation: suspended while translations are loading (useSuspense is true by default). Add a <Suspense> boundary above this component, or set react.useSuspense: false in the i18next init options. https://react.i18next.com/latest/usetranslation-hook');
+      }
       throw new Promise(resolve => {
         const onLoaded = () => resolve();
         if (props.lng) {