有时，在使用 React 库（例如react-router）时，我会收到以下错误：
未捕获的类型错误：无法读取未定义的属性“firstChild”
/~/react-router/~/react/lib/ReactMount.js?:606
我如何解决它？
问问题
16765 次
6 回答
65
这个错误通常是由同时加载的两个版本的 React引起的。
例如，如果你npm install的包需要不同的 React 版本并将其放入而dependencies不是.peerDependenciesnode_modules/<some library using React>/node_modules/react
两种不同的 React 不能很好地结合在一起（至少目前如此）。
要修复它，只需删除node_modules/<some library using React>/node_modules/react.
如果您看到一个库将 React 放入dependencies而不是peerDependencies，请提出问题。
于 2014-11-26T15:38:42.770 回答
11
npm link如果有人根据反应编辑两个模块有这个问题，我找到了一个解决方案......
假设您有依赖于 React 的父级和依赖于反应的子级。当你这样做时：
cd ../child
npm link
cd ../parent
npm link child
这会导致这个问题，因为父母和孩子将各自加载他们自己的 React 实例。
解决此问题的方法如下：
cd parent
cd node_modules/react
npm link
cd ../../../child
npm link react
这可以确保您的父项目提供 react 依赖项，即使在链接时也是如此，这就是 npm 在您取消链接时解决依赖项的方式。
于 2015-04-23T08:34:35.873 回答
4
使用require('react')和require('React')不一致也会导致这个问题，即使你只有一个版本的 React。
https://www.npmjs.com/package/gulp-browserify没有这个问题。一旦我停止使用 gulp-browserify 并切换到 watchify+browserify，Uncaught TypeError: Cannot read property 'firstChild' of undefined就开始发生了。
于 2015-03-08T00:03:00.160 回答
3
在我看来，peerDependencies 并没有受到关注。见https://github.com/npm/npm/issues/5080#issuecomment-40545599
我正在维护react-date-picker（和其他 react 模块），到目前为止我所做的是使用插入符号指定 React 依赖项，例如 ^0.12.0。
此外，在构建所有连接文件时，为了在 npm 生态系统之外使用，我使用 webpack
externals: { 'react': 'React'}
来查找全局 var React。
于 2015-02-18T10:18:54.897 回答
0
如果您在服务器端渲染时遇到此崩溃并且这些答案都不是问题，这可能是罪魁祸首：
在 componentWillMount 中执行异步操作（setTimeout、AJAX 等）。由于在服务器上调用了 componentWillMount，所以这个 setTimeout/request 仍然会触发。如果您在此回调中设置状态，则会导致上述错误。
于 2016-12-02T09:03:12.187 回答
0
对我来说，问题是我在from react-bootstrap中使用了<Link>from react-router 。<NavItem>
于 2015-09-03T06:16:27.123 回答