реагировать, конфигурация i18n, редукция и реакция маршрутизатора

Question

У меня есть простое (на данный момент) приложение, в котором используется реакция-маршрутизатор и редукция, и я хотел бы добавить к нему функции интернационализации.

Я установил пакет npm react-i18next и смог установить и запустить приведенный пример. Я добавил соответствующий импорт в свое приложение и добавил теги i18n к корневому методу рендеринга.

Когда я добавляю I18nextProvider тегов к методу визуализации, я получаю ошибку

can't find module 'react'

, который не особенно полезно, особенно потому, что если я удалить тег, то реагировать приложение работает нормально.

рендер метод, который я использую:

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: Я начал пустое приложение с помощью йо реагировать генератора, и это дает ту же самую проблему, так что я могу только предположить, это проблема связана с сборкой webpack

Я очень новичок в реакции/redux et al. но при отсутствии большого количества помощи в Интернете действительно будет признательна за любую помощь.

Полный стек трассировки:

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

Я ни разу не дошел до сути этой проблемы с технической точки зрения, поэтому реорганизован для использования react-intl для моих потребностей в интернационализации. Он отлично работает для меня с redux.

Answer 2

ли вы требуете Реагируйте на том, что JS файл, имеющий

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') 

, если вы не имеете проблемы ... все ваши JSX конвертируется to React.createComponent (...)

Не требуется Реакция приведет к ошибке связывания.