使用React时出现TypeError：无法读取属性＆＃39; firstChild＆＃39;未定义的

Question

有时，在使用React库时，例如react-router，我收到此错误：

  

未捕获的TypeError：无法读取未定义的属性“firstChild”
  /~/react-router/~/react/lib/ReactMount.js?:606

我该如何解决？

Answer 1

此错误通常由two versions of React loaded alongside引起。

例如，如果您npm install需要不同React版本并将其放入dependencies而不是peerDependencies的软件包，则可能会在node_modules/<some library using React>/node_modules/react中安装单独的React

两种不同的Reacts在一起玩得很好（至少还没有）。

要解决此问题，只需删除node_modules/<some library using React>/node_modules/react 如果您看到将React放入dependencies而不是peerDependencies的库，请提出问题。

Answer 2

如果有人根据反应npm link编辑了两个模块，那么我找到了一个解决方案......

让我们说你有父母取决于React，而Child取决于反应。当你这样做时：

cd ../child npm link cd ../parent npm link child

这导致了这个问题，因为父和子都会加载自己的React实例。

解决此问题的方法如下：

cd parent cd node_modules/react npm link cd ../../../child npm link react

这可确保您的父项目提供反应依赖项，即使在链接时也是如此，这是npm在您取消链接时解析依赖项的方式。

Answer 3

使用require('react')和require('React')不一致也会导致此问题，即使您只有一个版本的React。

https://www.npmjs.com/package/gulp-browserify没有这个问题。一旦我停止使用gulp-browserify并切换到watchify + browserify，Uncaught TypeError: Cannot read property 'firstChild' of undefined就开始发生了。

Answer 4

在我看来，peerDependencies并没有获得牵引力。见https://github.com/npm/npm/issues/5080#issuecomment-40545599

我正在维护react-date-picker（以及其他反应模块），到目前为止我所做的是使用插入符号指定React依赖项，例如^ 0.12.0。

另外，在构建所有连接文件时，为了在npm生态系统之外使用，我使用webpack externals: { 'react': 'React'} 这将寻找全局var React。

Answer 5

对我来说，问题是我在react-bootstrap的<Link>内使用了来自react-router的<NavItem>。

Answer 6

如果您在服务器端呈现时遇到此崩溃而这些答案都不是问题，那么可能是罪魁祸首：

在componentWillMount中执行async（setTimeout，AJAX等）。由于在服务器上调用了componentWillMount，因此仍会触发此setTimeout / request。如果你在这个回调中设置了state，那么它就会导致上面的错误。