javascript 使用 React 时出现类型错误：无法读取未定义的属性“firstChild”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27153166/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TypeError when using React: Cannot read property 'firstChild' of undefined
提问by Dan Abramov
Sometimes, when using React libraries, such as react-router, I get this error:
有时，在使用 React 库（例如react-router ）时，我会收到此错误：
Uncaught TypeError: Cannot read property 'firstChild' of undefined
/~/react-router/~/react/lib/ReactMount.js?:606
未捕获的类型错误：无法读取未定义的属性“firstChild”
/~/react-router/~/react/lib/ReactMount.js?:606
How do I fix it?
我如何解决它？
回答by Dan Abramov
This error is commonly caused by two versions of React loaded alongside.
这个错误通常是由两个版本的 React 一起加载引起的。
For example, if you npm installa package that requires a different React version and puts it into dependenciesinstead of peerDependencies, it might install a separate React into node_modules/<some library using React>/node_modules/react.
例如，如果您npm install的包需要不同的 React 版本并将其放入dependencies而不是 中peerDependencies，则它可能会安装一个单独的 React 到node_modules/<some library using React>/node_modules/react.
Two different Reacts won't play nicely together (at least yet).
两个不同的 React 不会很好地协同工作（至少目前如此）。
To fix it, just delete node_modules/<some library using React>/node_modules/react.
If you see a library putting React in dependenciesinstead of peerDependencies, file an issue.
要修复它，只需删除node_modules/<some library using React>/node_modules/react.
如果您看到一个库将 React 放入dependencies而不是peerDependencies，请提出问题。
回答by Tom
In case anyone has this issue having npm linked two modules depending on react, I found a solution...
万一有人遇到这个问题，npm link根据反应编写了两个模块，我找到了一个解决方案......
Let's say you have Parent depending on React, and Child depending on react. When you do:
假设您有 Parent 依赖于 React，而 Child 依赖于 React。当你这样做时：
cd ../child
npm link
cd ../parent
npm link child
cd ../child
npm link
cd ../parent
npm link child
This causes this problem, because parent and child will each load their own instance of React.
这会导致这个问题，因为父母和孩子将各自加载自己的 React 实例。
The way to fix this is as follows:
解决方法如下：
cd parent
cd node_modules/react
npm link
cd ../../../child
npm link react
cd parent
cd node_modules/react
npm link
cd ../../../child
npm link react
This ensures your parent project supplies the react dependency, even when linked, which is how npm would resolve the dependency when you are unlinked.
这可以确保您的父项目提供 react 依赖项，即使在链接时也是如此，这就是当您取消链接时 npm 将如何解析依赖项。
回答by Luqmaan
Using require('react')and require('React')inconsistently causes this problem as well, even if you only have one version of React.
使用require('react')和require('React')不一致也会导致这个问题，即使你只有一个版本的 React。
https://www.npmjs.com/package/gulp-browserifydidn't have this problem. Once I stopped using gulp-browserify and switched to watchify+browserify, Uncaught TypeError: Cannot read property 'firstChild' of undefinedstarted happening.
https://www.npmjs.com/package/gulp-browserify没有这个问题。一旦我停止使用 gulp-browserify 并切换到 watchify+browserify，Uncaught TypeError: Cannot read property 'firstChild' of undefined就开始发生。
回答by Radu Brehar
It seems to me peerDependencies is not getting traction. See https://github.com/npm/npm/issues/5080#issuecomment-40545599
在我看来， peerDependencies 并没有受到关注。见https://github.com/npm/npm/issues/5080#issuecomment-40545599
I am maintaining react-date-picker(and other react modules), and what I've done until now is to specify the React dependency using the caret, for example ^0.12.0.
我正在维护react-date-picker（和其他 react 模块），到目前为止我所做的是使用插入符号指定 React 依赖项，例如 ^0.12.0。
Also, when doing a build will all concatenated files, for use outside of the npm ecosystem, I use webpack with
externals: { 'react': 'React'}which will look for the global var React.
此外，在进行构建时，所有连接的文件都会在 npm 生态系统之外使用，我使用 webpack
externals: { 'react': 'React'}来查找全局 var React。
回答by ameensol
For me, the problem was that I was using a <Link>from react-router inside a <NavItem>from react-bootstrap.
对我来说，问题是我<Link>在<NavItem>from react-bootstrap 中使用了from react-router 。
回答by Andrew Rasmussen
If you are experiencing this crash while server side rendering and none of these answers are the problem, here's the likely culprit:
如果您在服务器端渲染时遇到此崩溃并且这些答案都不是问题，那么可能的罪魁祸首是：
Doing something async (setTimeout, AJAX, etc.) in componentWillMount. Since componentWillMount is called on the server, this setTimeout/request will still fire. If you setState inside this callback then it'll cause the error above.
在 componentWillMount 中执行一些异步操作（setTimeout、AJAX 等）。由于在服务器上调用 componentWillMount，此 setTimeout/request 仍将触发。如果您在此回调中设置状态，则会导致上述错误。
