使用React时的TypeError：无法读取未定义的属性“firstChild”

Question

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

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

我如何解决它？

Answer 1

此错误通常是由两个版本的React一起加载引起的。

例如，如果您npm install了一个需要不同React版本并将其放入dependencies而不是peerDependencies ，它可能会node_modules/<some library using React>/node_modules/react将一个单独的React安装到node_modules/<some library using React>/node_modules/react 。

两种不同的React不能很好地一起玩（至少还没有）。

要修复它，只需node_modules/<some library using React>/node_modules/react删除node_modules/<some library using React>/node_modules/react 。
如果您看到一个库将React放在dependencies而不是peerDependencies ，则提出问题。

Answer 2

如果任何人有这个问题有npm link ed两个模块取决于反应，我找到了一个解决方案......

假设您有父母取决于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 with externals: { 'react': 'React'}将查找全局var React 。

Answer 5

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

Answer 6

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

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