Как отладить ошибку в responsejs

Question

Минимизированный мой код в reactjs с помощью webpack, но получая эту ошибку, вытащите старшую ветвь без каких-либо изменений, которые работали раньше. все еще получаю ту же ошибку, поэтому я думаю, что, возможно, что-то изменилось с помощью responsejs или webpack. Можете ли вы предложить, как я отлаживаю, чтобы найти ошибку.

Uncaught Error: Invariant Violation: findComponentRoot(..., .0.0.0.0.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID `` 

Answer 1

Возможно, это связано с обновлением браузера, а не с реактивом.

В некоторых случаях браузер автоматически исправляет проблемы с вашим HTML, как указано в предупреждении от React.

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

<table> 
    <tr> 
    <td>A</td> 
    <td>1</td> 
    </tr> 
</table> 

Тогда некоторые браузеры будут пытаться помочь вам, добавив более семантически правильный <tbody> тег.

<table> 
    <tbody> 
    <tr> 
     <td>A</td> 
     <td>1</td> 
    </tr> 
    </tbody> 
</table> 

Подобное поведение может произойти, если вы вкладываете теги, которые не должны быть вложенными рекурсивно (<a>, <p>, <form>), или использование SVG-теги (<g>, <rect>, <path>) вне из <svg> родителя.

Если что-то еще мутирует DOM, в то время как React пытается справиться с этим, тогда трудно отделить виртуальный DOM от этого, поэтому React предупреждает вас, что произошло что-то плохое.

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

Если ветка определенно использовалась для работы, вы можете попробовать ее в старой версии вашего браузера (или в зависимости от того, какой браузер вы использовали в то время), чтобы подтвердить, что это проблема.

Откройте инспектор элементов, возьмите дамп HTML, затем используйте react-dom/server, чтобы отобразить приложение в виде строки, а затем разделите два, чтобы увидеть, что отображается как непоследовательное.

Answer 2

Вы можете использовать инструменты разработчика React для Chrome для проверки DOM, созданного React.

Я бы также протестировал неограниченную версию. Если неустановленная версия не работает, вы получите гораздо более строгие номера строк, позволяющие более точно изолировать ошибку, чем «где-то в моем приложении». Если работа с неиниминированной версией работает, то вы теперь изолировали свою проблему :)

Если вы считаете, что это связано с изменением в Реагировании, тогда проверьте старые версии реактивов (если это возможно).

РЕДАКТИРОВАТЬ: Я должен в основном сказать, что кто-то где-то модифицирует DOM таким образом, что React не ожидает. Добавили ли вы какие-либо другие библиотеки? Вы устанавливаете компонент на элемент кузова? У вашего HTML есть какие-либо из упомянутых проблем?