react-localize-redux: Translate returning invalid value

After updating to the latest version and switching to <Translate> from localize(), the following error logs to the console and the app doesn’t render at all: Invariant Violation: Translate.render(): A valid React element (or null) must be returned. It happens when using <Translate> with the id property, but if I supply it a render prop function, everything works well. The code is pretty simple:

const Introduction = () => {
  return (
    <section className={style.Introduction}>
      <article className={style.About}>
        <Translate id="introduction" />
      </article>
    </section>
  );
};

export default Introduction;

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 19 (10 by maintainers)

Most upvoted comments

Great! I’m glad I was able to help.

tariellaelius on Apr 12, 2018

I have confirmed that the issue is due to React 15 not supporting fragments and strings.

This was never an issue with the original translate function because that was always used in an expression, and it was ok to use text fragments not wrapped in elements. Where as the new Translate component will require wrapping text elements to render in react v15.

I’m most likely going to update the package.json peerDependency for react to 16.x.x, and then update the docs to include the workarounds if they want to use <Translate /> in older versions of React.

ryandrewjohnson on Apr 11, 2018

I was able to reproduce the problem - - and indeed, it happens with old version of React, 15.5.4 specifically. Updating react and react-dom to their latest versions fixes the problem. Still, digging deeper into the source, I found that getLocalizedElement returns either a React element, or just a translation string, depending on a couple of conditions. I may be wrong, but is this function not supposed to return a React element (or maybe null in certain cases), no matter what the conditions?

tariellaelius on Apr 11, 2018