Question

我有一个使用react-router和redux的简单（目前）应用程序，我想为其添加国际化功能。

我已经安装了npm包react-i18next并且能够安装并运行提供的示例。我已将适当的导入添加到我自己的应用程序中，并将i18n标记添加到根渲染方法中。

当我将 I18nextProvider 标记添加到渲染方法时，我收到错误

无法找到模块'反应'

哪个不是特别有用，特别是因为如果删除标签，反应应用运行正常。

我正在使用的渲染方法是：

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

修改我已经使用yo react生成器启动了一个空白的应用程序，它给出了同样的问题，所以我只能假设这个问题与webpack构建有关

我很反应/ redux等。但是，如果没有互联网上的大量帮助，我们将非常感谢您的帮助。

完整堆栈跟踪是：

未捕获错误：无法找到模块'react'o @   index.js？0f21：1（匿名函数）@ index.js？0f21：1r.4.react @   index.js？0f21：1o @ index.js？0f21：1（匿名函数）@index。

js？0f21：1r.2 ../ I18nextProvider @ index.js？0f21：1o @ index.js？0f21：1e @   index.js？0f21：1（匿名函数）@ index.js？0f21：1c @   index.js？0f21：1（匿名函数）@ index.js？0f21：1（匿名   函数）@ app.js：4127__webpack_require__ @ app.js：535fn @   app.js：76（匿名函数）@ VM91841：35（匿名函数）@   index.js？9552：67（匿名函数）@ index.js？9552：67（匿名   函数）@ app.js：1024__webpack_require__ @ app.js：535fn @   app.js：76（匿名函数）@ app.js：567__webpack_require__ @   app.js：535（匿名函数）@ app.js：558（匿名函数）@   app.js：561       客户端？8a21：22 [WDS]热模块更换已启用。

Answer 1

您是否需要对具有

的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都被转换为React.createComponent（...）

不要求React会导致捆绑错误。

Answer 2

我从技术角度来看并没有触及到这个问题的根源，所以重构使用react-intl代替我的国际化需求。 redux也适用于我。

react，i18n，redux和react路由器配置

2 个答案: