{"action":"opened","issue":{"url":"https://api.github.com/repos/Izzimach/om-react-pixi/issues/5","labels_url":"https://api.github.com/repos/Izzimach/om-react-pixi/issues/5/labels{/name}","comments_url":"https://api.github.com/repos/Izzimach/om-react-pixi/issues/5/comments","events_url":"https://api.github.com/repos/Izzimach/om-react-pixi/issues/5/events","html_url":"https://github.com/Izzimach/om-react-pixi/issues/5","id":54801318,"number":5,"title":"Changing children types will cause React Error","user":{"login":"xeqi","id":51907,"avatar_url":"https://avatars.githubusercontent.com/u/51907?v=3","gravatar_id":"","url":"https://api.github.com/users/xeqi","html_url":"https://github.com/xeqi","followers_url":"https://api.github.com/users/xeqi/followers","following_url":"https://api.github.com/users/xeqi/following{/other_user}","gists_url":"https://api.github.com/users/xeqi/gists{/gist_id}","starred_url":"https://api.github.com/users/xeqi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/xeqi/subscriptions","organizations_url":"https://api.github.com/users/xeqi/orgs","repos_url":"https://api.github.com/users/xeqi/repos","events_url":"https://api.github.com/users/xeqi/events{/privacy}","received_events_url":"https://api.github.com/users/xeqi/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-01-19T19:12:30Z","updated_at":"2015-01-19T19:12:30Z","closed_at":null,"body":"## Summary\r\n\r\nWhen changing children of a `PIXI.Stage` into different types, React will attempt to remove a DOM node, causing an error.\r\n\r\n## Reproduction\r\n\r\nMinimal example:\r\n```clojure\r\n(ns example.core\r\n  (:require [om.core :as om :include-macros true]\r\n            [omreactpixi.abbrev :as pixi]))\r\n\r\n\r\n(defmulti game :state :default :loading)\r\n\r\n(defmethod game :loading [app owner]\r\n  (reify\r\n    om/IRender\r\n    (render [_]\r\n      (pixi/displayobjectcontainer\r\n       {:interactive true\r\n        :buttonMode true\r\n        :click #(om/transact! app (fn [c] (assoc c :state :loaded)))}\r\n       (pixi/text {:text \"Click here to load\"\r\n                   :x 30\r\n                   :y 30})))))\r\n\r\n(defmethod game :loaded [app owner]\r\n  (reify\r\n    om/IRender\r\n    (render [_]\r\n      (pixi/text {:text \"Loaded!\"}))))\r\n\r\n(defn main []\r\n  (om/root\r\n   (fn [app owner]\r\n     (om/component\r\n      (pixi/stage {:width 640\r\n                   :height 480\r\n                   :backgroundcolor 0x888888}\r\n                  (om/build game app))))\r\n   {}\r\n   {:target (. js/document (getElementById \"app\"))}))\r\n\r\n```\r\n\r\n## Expected\r\nWhen the text is clicked the `PIXI.DisplayObjectContainer` should be removed and a `PIXI.Text` should be added.\r\n\r\n## Current Output\r\nConsole Error:\r\n> Uncaught Error: Invariant Violation: `findComponentRoot(..., .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 ``.\r\n\r\n\r\n## Additional notes\r\n\r\nThis will happen when changing the type of the children.  I originally hit this going from `PIXI.Text` to `PIXI.Sprite`, but figured this example was more minimal. `reactpixi.js#L6630` calls ` shouldUpdateReactComponent` to check if it should attempt DOM node removal, and this functions seems to allow inplace changes when they are the same type.\r\n\r\nThe error happens when `reactpixi.js#L6646` calls `ReactComponent.BackendIDOperations.dangerouslyReplaceNodeWithMarkupByID`. Since this attempts to search the DOM for the nodes I have a feeling this shouldn't be happening. I don't understand React's internal mixins enough to propose a solution.\r\n\r\nThis might have been better placed in [react-pixi](https://github.com/Izzimach/react-pixi), but I don't have the build tools to create a reproduction case."}}