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

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();

Code in App.jsx

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;

And in the HomePage.jsx. I just try translating one thing like that.

<h2>
            <Trans id="appName">Do whatever you want to do</Trans>
  </h2>

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

[khaoptimist97]

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

[khaoptimist97]

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