TypeError при использовании React: невозможно прочитать свойство firstChild из undefined

Ответ 1

Эта ошибка обычно вызвана двумя версиями React, загруженными рядом.

Например, если вы npm install пакет, который требует другую версию React и помещает его в dependencies вместо peerDependencies, он может установить отдельный React в node_modules/<some library using React>/node_modules/react.

Два разных Реата не будут играть хорошо вместе (по крайней мере пока).

Чтобы исправить это, просто удалите node_modules/<some library using React>/node_modules/react.
Если вы видите, что библиотека помещает React в dependencies вместо peerDependencies, сообщите о проблеме.

Ответ 2

Если у кого-то есть проблема с npm link ed двумя модулями в зависимости от реакции, я нашел решение...

Скажем, у вас есть Родитель в зависимости от Реагента, и Ребенок в зависимости от реакции. Когда вы выполните:

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

Это вызывает эту проблему, так как родитель и ребенок будут загружать собственный экземпляр React.

Способ исправления выглядит следующим образом:

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

Это гарантирует, что ваш родительский проект будет поставлять зависимую реакцию, даже если она связана, так как npm будет разрешать зависимость, когда вы отсоединены.

Ответ 3

Использование require('react') и require('react') непоследовательно вызывает эту проблему, даже если у вас есть только одна версия React.

https://www.npmjs.com/package/gulp-browserify не было этой проблемы. Как только я перестал использовать gulp -browserify и переключился на watchify + browsify, начало Uncaught TypeError: Cannot read property 'firstChild' of undefined.

Ответ 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.

Ответ 5

Для меня проблема заключалась в том, что я использовал <Link> от реактивного маршрутизатора внутри <NavItem> от реакции-бутстрапа.

Ответ 6

Если вы столкнулись с этим сбоем при рендеринге на стороне сервера, и ни один из этих ответов не является проблемой, здесь вероятный виновник:

Выполнение чего-то async (setTimeout, AJAX и т.д.) в компонентеWillMount. Поскольку на сервере вызывается компонент componentWillMount, этот setTimeout/request будет по-прежнему запускаться. Если вы устанавливаетеState внутри этого обратного вызова, это приведет к ошибке выше.