React-i18next: Trans.renderer. A valid React element (or null) must be returned.

[allexysleeps]

I'm getting this message every time I'm trying to use Trans. Other react-i18next lib works fine in project. Can't find what I'm doing wrong. Does anybody has the same issue?

Trans code:

<Trans
    i18n={this.props.i18n}
    i18nKey='repayment:enter phone used in registration'
    phone={maskNumber(this.props.accountPhone)}>
    some test
</Trans>

Full Error log:

invariant.js:42 Uncaught Error: Trans.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
    at invariant (invariant.js:42)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:828)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:359)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
    at Object.mountComponent (ReactReconciler.js:43)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:234)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:701)
    at ReactDOMComponent.mountComponent (ReactDOMComponent.js:520)
    at Object.mountComponent (ReactReconciler.js:43)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:234)

[adrai]

Is this happening with the latest version?

Perhaps is related to: https://github.com/i18next/react-i18next/issues/363

[allexysleeps]

@adrai thx for answer,
I used 7.1.1 updated to 7.2.0. Still facing the same issue.

[jamuhl]

your using react below v16?!? if so you will have to set: https://github.com/i18next/react-i18next/blob/master/CHANGELOG.md#700

react.defaultTransParent: true in i18next.init

[jamuhl]

i18n
  .use(XHR)
  .use(LanguageDetector)
  .use(reactI18nextModule) // if not using I18nextProvider
  .init({
    fallbackLng: 'en',
    debug: true,

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

    // react i18next special options (optional)
    react: {
      defaultTransParent: true
    }
  });

[allexysleeps]

@jamuhl thanks a lot.
actually defaultTransParent: true didn't work, but I've passed span, now works fine in react 15.15.4.

react: {
      defaultTransParent: true
    }

[jamuhl]

argh...yes...must define a parent element...sorry

[matthewoates]

Hi guys. Reviving an old thread.

I believe if t returned null instead of undefined you wouldn't need a wrapper component, since react gracefully handles rendering null.

Is there a historical reason that t returns undefined, or could we make this change without issue?

[jamuhl]

@matthewoates t technically can't return undefined and null only if set so -> t returns translation, default value or key -> but never undefined