Js-lingui: Unhandled Rejection (Invariant Violation): Trans(...): Nothing was returned from render

[khaoptimist97]

Solution

• If you use create-react-app 1.x, update to 2.x.
• If you use custom Babel config, add macros plugin

---

Original issue

Hi all, I have a problem when try to follow the steps in documentation (Tutorial for React).

The error: Trans(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

My project has App component separately. It doesn like the example from doc. I got the project done after finishing React course in Udemy and I want to translate this app.
I confused to determine the place of I18nProvider should be. Would I put it in index.js or App.jsx.
Im a beginner with React, so I will appreciate in advance with any help from you guys.

index.js:

const store = configureStore();
const rootEl = document.getElementById('root');

let render = () => {
  ReactDOM.render(
    <Provider store={store}>
      <I18nProvider language="vi" catalogs={{ vi: catalogVi }}>
        <BrowserRouter>
          <ScrollToTop>
            <ReduxToastr position="bottom-right" transitionIn="fadeIn" transitionOut="fadeOut" />
            <App />
          </ScrollToTop>
        </BrowserRouter>
      </I18nProvider>
    </Provider>,
    rootEl
  );
};

if (module.hot) {
  module.hot.accept('./app/layout/App', () => {
    setTimeout(render);
  });
}
store.firebaseAuthIsReady.then(() => {
  render();
});

registerServiceWorker();



md5-5506df47aeead25a2f9be497e1cbc361



class App extends Component {
  render() {
    return (
      <div>
        <AsyncModalManager />
        <Switch>
                  // This is the component I want to translate
                 <Route exact path="/" component={HomePage} />_ 
        </Switch>
        <Route
          path="/(.+)"
          render={() => (
            <div>
              <AsyncNavBar />
              <Container className="main">
                <Switch>
                  <Route path="/events" component={AsyncEventDashboard} />
                  <Route path="/event/:id" component={AsyncEventDetailedPage} />
                  <Route path="/manage/:id" component={UserIsAuthenticated(AsyncEventForm)} />
                  <Route path="/people" component={UserIsAuthenticated(AsyncPeopleDashboard)} />
                  <Route path="/profile/:id" component={UserIsAuthenticated(AsyncUserDetailedPage)} />
                  <Route path="/settings" component={UserIsAuthenticated(AsyncSettingsDashboard)} />
                  <Route path="/createEvent" component={UserIsAuthenticated(AsyncEventForm)} />
                  <Route path="/error" component={AsyncNotFound} />
                  {/* Every wrong path return to Not found component */}
                  <Route component={AsyncNotFound} />
                </Switch>
              </Container>
            </div>
          )}
        />
      </div>
    );
  }
}
export default App;



md5-1c9813f3d6c234f70feaae5c64c1d452





md5-83b3e736521c6961d4d880079e157671

After extract and compile, I could see the messages.js in catalogs. But when running in development mode, it throws this kind of error. I knew that I have some mistakes at some points. But I dont really understand deeply how it works. Please give me any suggestion. Thanks

[dhrubesh]

I'm stuck in the same problem.

[tricoder42]

Could you please create a repository with minimal example to reproduce this bug? I've just tried it with react-router-dom and creat-react-app and it works for me.

[khaoptimist97]

Hi @tricoder42
Would it be possible with project using webpack code splitting currently?

[tricoder42]

@khaoptimist97 Do you use Create React App 1.x? @dhrubesh has similar issue and it's cased by this. If so, please upgrade to 2.x if you can (should be easy). That's the easiest way to use Trans macro.

[khaoptimist97]

@tricoder42 OMG it's magic. I've upgraded to 2.x and eventually it works. Thank you for your support.

[khaoptimist97]

@dhrubesh Check it out to upgrade the latest version bro: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

[gurschitz]

@tricoder42
Do you happen to know what exactly in Create React App 2.x is solving the issue? I've ejected my application and I've also encountered the same problem.

[tricoder42]

It's hard to tell. Could you please publish your repository or at least a minimal example to debug it?

[gurschitz]

Actually, my bad, sorry. I forgot to add the "macros" plugin to .babelrc - now it seems to be working!

[tricoder42]

Great! I'll add this solution to troubleshooting. Thanks!