Fix Trans component when index is incorrect (#24)

* Fix Trans component  when index is incorrect

* Fix test text

__tests__/Trans.test.js

@@ -95,5 +95,22 @@ describe('Trans', () => {
  expect(container.textContent).toContain(expectedText)
  expect(container.innerHTML).toContain(expectedHTML)
  })
+
+ test('should work without replacing the HTMLElement if the index is incorrectly', () => {
+ const i18nKey = 'common:test-html'
+ const expectedHTML = "test with bad index."
+ const common = { 
+ "test-html": "test <10>with bad index</10>.",
+ }
+
+ const { container } = render(
+ <TestEnglish 
+ namespaces={{ common }} 
+ i18nKey={i18nKey} 
+ components={[<b />]}
+ />
+ )
+ expect(container.innerHTML).toContain(expectedHTML)
+ })
  })
 })

package.json

@@ -1,6 +1,6 @@
 {
  "name": "next-translate",
- "version": "0.1.6",
+ "version": "0.1.7",
  "description": "Next.js utility to translate pages without the need of a server (static i18n pages generator).",
  "license": "MIT",
  "keywords": [

src/Trans.js

@@ -1,4 +1,4 @@
-import { cloneElement, useMemo } from 'react'
+import { cloneElement, useMemo, Fragment } from 'react'
 import useTranslation from './useTranslation'
 
 const tagRe = /<(\d+)>(.*?)<\/\1>|<(\d+)\/>/
@@ -28,7 +28,8 @@ function formatElements(
  if (before) tree.push(before)
 
  for (const [index, children, after] of getElements(parts)) {
- const element = elements[index]
+ const element = elements[index] || <Fragment />
+
  tree.push(
  cloneElement(
  element,

src/appWithI18n.js

@@ -2,7 +2,7 @@ import React from 'react'
 import I18nProvider from './I18nProvider'
 
 function getLang(ctx, config) {
- const { req, asPath } = ctx
+ const { req, asPath = '' } = ctx
 
  if (req) return req.query.lang || config.defaultLanguage