blocks|key|2618908|text|此错误通常是由两个版本的React一起加载引起的。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2618909|例如，如果您npm+install一个需要不同的React版本的包，并将它放入dependencies而不是peerDependencies中，那么它可能会在node_modules/<some+library+using+React>/node_modules/react中安装一个单独的React。|style|CODE|2618910|两种不同的反应不能很好地结合在一起(至少现在是这样)。|2618911|要修复它，只需删除node_modules/<some+library+using+React>/node_modules/react。|2618912|如果您看到一个库在dependencies中而不是在peerDependencies中进行反应，请提交一个问题。|2618913|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/facebook/react/issues/2402^0|7|E|0|0|6|B|13|C|1I|G|27|1M|0|0|9|1M|0|9|C|Q|G|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|6|7|Z|8|@$A|10|B|11|F|G]|$A|12|B|13|F|G]|$A|14|B|15|F|G]|$A|16|B|17|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|18|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|19|8|@$A|1A|B|1B|F|G]]|9|@]|C|$]]|$1|L|3|M|5|6|7|1C|8|@$A|1D|B|1E|F|G]|$A|1F|B|1G|F|G]]|9|@]|C|$]]|$1|N|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]]]

This error is commonly caused by <a href="https://github.com/facebook/react/issues/2402" rel="noreferrer">two versions of React loaded alongside</a>.

For example, if you <code>npm install</code> a package that requires a different React version and puts it into <code>dependencies</code> instead of <code>peerDependencies</code>, it might install a separate React into <code>node_modules/&lt;some library using React&gt;/node_modules/react</code>.

Two different Reacts won't play nicely together (at least yet).

To fix it, just delete <code>node_modules/&lt;some library using React&gt;/node_modules/react</code>. 
If you see a library putting React in <code>dependencies</code> instead of <code>peerDependencies</code>, file an issue.

blocks|key|1382050|text|如果有人有这个问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1382051|假设你的父母依赖于反应，而孩子则取决于反应。当你这样做时：|1382052|cd+../child+npm+link+cd+../parent+npm+link+child|offset|length|style|CODE|1382053|这导致了这个问题，因为父级和子级将各自加载自己的React实例。|1382054|解决这个问题的方法如下：|1382055|cd+parent+cd+node_modules/react+npm+link+cd+../../../child+npm+link+react|1382056|这可以确保父项目提供react依赖关系，即使是链接时也是如此，这就是npm在未链接时解决依赖关系的方法。|1382057|entityMap^0|0|0|0|1C|0|0|0|0|21|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|V|8|@$F|W|G|X|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|Y|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|Z|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|10|8|@$F|11|G|12|H|I]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|13|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|S|$]]

In case anyone has this issue having <code>npm link</code>ed two modules depending on react, I found a solution...

Let's say you have Parent depending on React, and Child depending on react. When you do:

<code>
cd ../child
npm link
cd ../parent
npm link child
</code>

This causes this problem, because parent and child will each load their own instance of React.

The way to fix this is as follows:

<code>
cd parent
cd node_modules/react
npm link
cd ../../../child
npm link react
</code>

This ensures your parent project supplies the react dependency, even when linked, which is how npm would resolve the dependency when you are unlinked.

blocks|key|1151200|text|使用require('react')和require('React')也会导致这个问题，即使只有一个版本的React。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1151201|https://www.npmjs.com/package/gulp-browserify没有这个问题。一旦我停止使用watchify%2Bbrowserify并切换到watchify%2Bbrowserify，Uncaught+TypeError:+Cannot+read+property+'firstChild'+of+undefined就开始发生了。|1151202|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/gulp-browserify^0|2|G|J|G|0|2U|1U|0|19|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|H|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

Using <code>require('react')</code> and <code>require('React')</code> inconsistently causes this problem as well, even if you only have one version of React.

<a href="https://www.npmjs.com/package/gulp-browserify" rel="nofollow">https://www.npmjs.com/package/gulp-browserify</a> didn't have this problem. Once I stopped using gulp-browserify and switched to watchify+browserify, <code>Uncaught TypeError: Cannot read property 'firstChild' of undefined</code> started happening.

blocks|key|1382003|text|在我看来，peerDependencies并没有受到牵引力。请参阅https://github.com/npm/npm/issues/5080#issuecomment-40545599|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1382004|我正在维护反应日期选择器+(和其他反应模块)，到目前为止，我所做的是使用插入符号指定react依赖项，例如%5E0.12.0。|1382005|此外，在做构建时将所有的连接文件，为了在npm生态系统之外使用，我使用webpack和externals:+{+'react':+'React'}，它将寻找全局var+React。|style|CODE|1382006|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/npm/npm/issues/5080#issuecomment-40545599|1|https://www.npmjs.com/package/react-date-picker^0|X|1O|0|0|5|7|1|0|17|U|2C|5|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|F|3|G|5|6|7|11|8|@$A|12|B|13|H|I]|$A|14|B|15|H|I]]|9|@]|C|$]]|$1|J|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]|R|$5|M|N|O|C|$P|S]]]]

It seems to me peerDependencies is not getting traction. See <a href="https://github.com/npm/npm/issues/5080#issuecomment-40545599" rel="nofollow">https://github.com/npm/npm/issues/5080#issuecomment-40545599</a>

I am maintaining <a href="https://www.npmjs.com/package/react-date-picker" rel="nofollow">react-date-picker</a> (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.

Also, when doing a build will all concatenated files, for use outside of the npm ecosystem, I use webpack with
<code>externals: { 'react': 'React'}</code>
which will look for the global var <code>React</code>.

blocks|key|1382061|text|对我来说，问题是我使用了一个来自react路由器的<Link>，在<NavItem>内部使用了react。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1382062|entityMap^0|P|6|X|9|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

For me, the problem was that I was using a <code>&lt;Link&gt;</code> from react-router inside a <code>&lt;NavItem&gt;</code> from react-bootstrap.

blocks|key|2619036|text|如果您在服务器端呈现时遇到了这种崩溃，而这些答案都不是问题所在，那么以下是可能的罪魁祸首：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2619037|做一些异步的事情(setTimeout、AJAX等)在componentWillMount中。由于服务器上调用了componentWillMount，这个setTimeout/请求仍然会触发。如果您在这个回调中setState，那么它将导致上面的错误。|2619038|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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.

Sometimes, when using React libraries, such as <a href="https://github.com/rackt/react-router">react-router</a>, I get this error:

<blockquote>
 Uncaught TypeError: Cannot read property 'firstChild' of undefined 
 /~/react-router/~/react/lib/ReactMount.js?:606
</blockquote>

How do I fix it?

TypeError when using React: Cannot read property 'firstChild' of undefined

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

有时，当使用React库(如 )时，我会得到以下错误：未定义的TypeError:无法读取未定义的属性“firstChild”/~/react-router/~/react/lib/ReactMount.js?:606我该怎么解决呢？

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

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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