2

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.

KerSplosh
  • 466
  • 8
  • 26
  • Does your error come with a stack trace? That would help pinpoint exactly what's going wrong :) – Jim O'Brien Feb 12 '16 at 18:12
  • added. I see some mentions of _webpack_require in there, but unsure of what this means – KerSplosh Feb 12 '16 at 18:19
  • Ah, this isn't going to be particularly helpful unless you [enable source maps in webpack](http://stackoverflow.com/a/31101665/801702). `__webpack_require__` is the function provided by webpack to replace `require`/`import` in your bundle, so it seems for some reason your i18n library is struggling to import React. – Jim O'Brien Feb 12 '16 at 18:37
  • I've just taken a look at [react-i18next's dependencies](https://github.com/i18next/react-i18next/blob/master/package.json#L23), and it looks like it doesn't include React. This is probably why webpack is failing to map it properly. I'm gonna raise an issue on their github, and maybe a cheeky pull request to fix it. – Jim O'Brien Feb 12 '16 at 18:44
  • 1
    Raised [an issue on GitHub](https://github.com/i18next/react-i18next/issues/10) and [accompanying PR](https://github.com/i18next/react-i18next/pull/11). If you wanna try my branch out, change your package.json to have `"react-i18next": "jimmed/react-i18next#patch-1"` instead of the current version, and run `npm i`. – Jim O'Brien Feb 12 '16 at 18:48
  • Will have a look and see how I get on – KerSplosh Feb 12 '16 at 20:32
  • @Jim I've hooked up your repo, but still getting the same problem – KerSplosh Feb 13 '16 at 15:41

2 Answers2

0

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.

jamuhl
  • 4,352
  • 2
  • 25
  • 31
  • what you you mean by this? I have a `import React from 'react' ` statement - I mentioned in the OP – KerSplosh Feb 12 '16 at 19:14
  • 1
    [This test suite seems to suggest otherwise](https://github.com/webpack/webpack/blob/master/test/cases/concord/inner-modules-and-extensions/index.js). I could be wrong. The webpack codebase is insane. – Jim O'Brien Feb 12 '16 at 19:37
  • yes..you need to import React from 'react' on top...see https://babeljs.io/repl/#?experimental=false&evaluate=true&loose=false&spec=false&code=%3Cdiv%20%2F%3E that's what your code gets transpiled to. Using eg. eslint it would warn you about missing react. – jamuhl Feb 20 '16 at 07:39
  • Is it OK to use nested providers though? – Michal Feb 27 '17 at 13:02
0

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.

KerSplosh
  • 466
  • 8
  • 26