react, i18n, redux and react router configuration

Question

Ive got a simple (at the moment) app that uses react-router and redux and I would like to add internationalization functionality to it.

I have installed the npm package react-i18next and been able to install and run the example provided. I've added the appropriate imports into my own app and added the i18n tags to the root render method.

When I add the I18nextProvider tags to the render method, I get the error

can't find module 'react'

Which is not particularly helpful, especially because if I remove the tags, the react app runs fine.

The render method that I am using is:

import React from 'react'
import ReactDOM from 'react-dom'    
....    

ReactDOM.render(
  <I18nextProvider i18n={ i18n }>
  <Provider store={store}>
    <div>
      <Router history={history}>
        <Route path="/" component={App}>
          <IndexRoute component={DashboardIndex}/>
          <Route path="about" component={About}/>
          <Route path="collectors" component={Collectors}/>
        </Route>
      </Router>
      <DevTools />
    </div>
  </Provider>
  </I18nextProvider>,
  document.getElementById('app')

Edit: I have started a blank application using a yo react generator, and it gives the same problem, so I can only assume this problem has something to do with the webpack build

I am very new to react/redux et al. but in the absence of lots of help on the internet would really appreciate any help.

The full stack trace is:

Uncaught Error: Cannot find module 'react'o @ index.js?0f21:1(anonymous function) @ index.js?0f21:1r.4.react @ index.js?0f21:1o @ index.js?0f21:1(anonymous function) @ index.

js?0f21:1r.2../I18nextProvider @ index.js?0f21:1o @ index.js?0f21:1e @ index.js?0f21:1(anonymous function) @ index.js?0f21:1c @ index.js?0f21:1(anonymous function) @ index.js?0f21:1(anonymous function) @ app.js:4127__webpack_require__ @ app.js:535fn @ app.js:76(anonymous function) @ VM91841:35(anonymous function) @ index.js?9552:67(anonymous function) @ index.js?9552:67(anonymous function) @ app.js:1024__webpack_require__ @ app.js:535fn @ app.js:76(anonymous function) @ app.js:567__webpack_require__ @ app.js:535(anonymous function) @ app.js:558(anonymous function) @ app.js:561 client?8a21:22 [WDS] Hot Module Replacement enabled.

Answer 1

I didn't ever get to the bottom of this problem from a technical perspective, so refactored to use react-intl for my internationalization needs instead. It works fine for me with redux as well.

Answer 2

Did you require 'react' on that js file having the

ReactDOM.render(
  <I189nextProvider i18n={ i18n }>
  <Provider store={store}>
    <div>
      <Router history={history}>
        <Route path="/" component={App}>
          <IndexRoute component={DashboardIndex}/>
          <Route path="about" component={About}/>
          <Route path="collectors" component={Collectors}/>
        </Route>
      </Router>
      <DevTools />
    </div>
  </Provider>
  </I189nextProvider>,
  document.getElementById('app')

if not you have the problem...all your jsx gets converted to React.createComponent(...)

not requiring React will lead to a bundling error.