Обновление React до 0.13.2 вызывает: "Uncaught TypeError: невозможно прочитать свойство" _currentElement "из null"
Я обновил версию React от 0.12.2 до 0.13.2 и мой React-Router с 0.12.4 до 0.13.2. Выполняя только эти два обновления и ничего больше, теперь я получаю следующую ошибку при загрузке моей веб-страницы/приложения:
Uncaught TypeError: Cannot read property '_currentElement' of null
Любые идеи, что может быть причиной этого? У меня есть некоторые ссылки на потенциальную ошибку React-Router, но ничего окончательного.
Конкретная строка, которая вызывает ошибку:
ReactRef.detachRefs(internalInstance, internalInstance._currentElement);
Обновление 1: Я также просто обновил обновление с версии 1.0.0 до 1.1.0 и response-router-bootstrap (которого я пока еще не использую) с 0.9.1 до 0.13. 0 на основе комментариев @BinaryMuse - без изменений.
Обновление 2:. После дальнейшего тестирования я сузил это до проблемы с react-d3. Отключение кода реакции-d3 с моего сайта приводит к тому, что ошибка исчезнет. Я удаляю код маршрутизации, чтобы сделать сообщение более кратким, так как теперь я уверен, что реакция маршрутизатора не вызывает этой проблемы.
Обновление 3: Благодаря @CoryDanielson для создания нового тега для react-d3.
package.json
{
"author": "me",
"name": "my project",
"description": "my awesome project",
"version": "0.1.0",
"dependencies": {
"bootstrap": "^3.3.2",
"d3": "^3.5.5",
"font-awesome": "^4.3.0",
"jquery": "^2.1.3",
"react": "^0.13.2",
"react-bootstrap": "^0.21.0",
"react-d3": "^0.3.1",
"react-router": "^0.13.2",
"react-router-bootstrap": "~0.13.0",
"reflux": "^0.2.6",
"uuid": "^2.0.1"
},
"devDependencies": {
"browser-sync": "^2.2.2",
"browserify": "^9.0.3",
"del": "^1.1.1",
"envify": "^3.4.0",
"gulp": "^3.8.11",
"gulp-css-url-adjuster": "^0.2.3",
"gulp-jshint": "^1.9.2",
"gulp-minify-css": "^0.5.1",
"gulp-sourcemaps": "^1.5.0",
"gulp-uglify": "^1.1.0",
"gulp-util": "^3.0.4",
"gulp-watch": "^4.1.1",
"reactify": "~1.1.0",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.0.0",
"watchify": "^2.4.0"
},
"browserify": {
"transform": [
[
"reactify",
{
"es6": false
}
]
]
},
}
Ответы
Ответ 1
Я понял это. Это проблема с функцией render
, найденной в react-d3 linechart/DataSeries
. Функция проверяет тип данных путем выборки первого элемента массива данных. Тем не менее, он не предоставляет никаких проверок, чтобы увидеть, пуст ли массив данных.
Я видел ошибки, исходящие от LineChart
раньше в виде
Uncaught TypeError: Cannot read property 'x' of undefined
Однако я игнорировал их, так как они были ошибками доступа и не останавливали запуск приложения. Что-то в реактиве должно было измениться с v0.12.4 до v.0.13.2 таким образом, что эти ранее безвредные ошибки теперь ломаются. Я прочитал примечания к выпуску для v0.13.0, v0.13.1 и v.0.13.2, но не нашел ничего, что указывало бы, почему эта новая ошибка произошла. У меня не было времени посмотреть на diff кода.
Я не связывал две ошибки, потому что части LineChart
все еще бросают Uncaught TypeError: Cannot read property 'x' of undefined
, поэтому я просто предположил, что ошибка Uncaught TypeError: Cannot read property '_currentElement' of null
была новой, вызванной обновлением, и маскировала дополнительную, не может прочитать ошибки x.
В ближайшее время я отправлю запрос pull-response для ответа-d3, чтобы исправить эту проблему. Спасибо всем за вашу помощь.
Обновление: вот запрос pull
Ответ 2
У меня была такая же точная проблема с 0.13.2, однако причина моей ошибки и решения для нее была немного иной:
Ошибка пришла к моей версии на npm. Я использовал npm 2.1.4 с момента обновления (теперь в 2.8.4) и запускаю обновление npm -g npm, я смог получить все, не касаясь моего package.json или чего-нибудь еще.
Сообщите мне, если это сработает для вас!
Ответ 3
Если это может помочь, у меня была такая же ошибка с компонентом Material-UI DropDownMenu, используя неправильное имя имени prop (onItemChange вместо onChange).
<DropDownMenu menuItems={menuItems} onChange={this._onItemClick}/>
Использование правильного имени профайла разрешило мне эту проблему.
Ответ 4
Проводил весь день борьбу с этой проблемой, и в итоге она вызвана console.warn
вызовами ошибок проверки React.PropTypes. Как только мы исправили эти проблемы PropType, IE9 снова начал работать. (наши проблемы были связаны с данными, имеющими undefined значения вместо строк, и предложением использовать ключевой атрибут для некоторого JSX)
HTML Boilerplate имеет решение для этого, которое каждый должен использовать:
https://github.com/h5bp/html5-boilerplate/blob/master/src/js/plugins.js#L2-L22
// Avoid `console` errors in browsers that lack a console.
(function() {
var method;
var noop = function () {};
var methods = [
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn'
];
var length = methods.length;
var console = (window.console = window.console || {});
while (length--) {
method = methods[length];
// Only stub undefined methods.
if (!console[method]) {
console[method] = noop;
}
}
}());
Такая же проблема: Почему JavaScript работает только после открытия инструментов разработчика в IE один раз?
Ответ 5
Добавление "babel- polyfill" решило проблему для меня в IE11
Ответ 6
Я получил эту ошибку, когда мой файл app.jsx ссылался на компонент List, и я забыл включить его с помощью
var List = require('./list');