`Failed to execute 'removeChild' on 'Node':` conditional node issues causing keys in strange places

Open bryceosterhaus opened this issue 7 years ago • 0 comments

We often find ourselves getting this JS error when dynamically swapping content in a component. Out way around this issue has been to add key= to various elements in order to get incremental-dom to stop re-using nodes. However, sometimes the bug ends up happing and we are required to remove a key.

I haven't nailed down a snippet that showcases the error but usually revolves around a HOC that swaps out content.

For example:

//HOC
<div>
	{this.props.fooConditional && <FooComponent />}

	<div>
		// some other html content
	</div>

	{this.props.children}
</div>

// page 1
<HOC fooConditional={true}>
	// some html structure
</HOC>

// page 2
<HOC fooConditional={false}>
	// some html structure
</HOC>

When navigating back and forth from each page, there is a js error and the page content crashes. The component will not always error, but depending on the structure of the html rendered via children. There will be an error.

JS error:

incremental-dom-cjs.js:838 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at removeChild (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:72250:8)
    at alignWithDOM (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:72205:9)
    at coreElementOpen (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:72342:3)
    at elementOpen (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:72606:14)
    at handleRegularCall_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27714:66)
    at handleInterceptedOpenCall_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27675:29)
    at Object.handleCall (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:20623:12)
    at NavBar.render (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:17065:19)
    at JSXRenderer.renderIncDom (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:28540:43)
    at render (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27864:26)
    at JSXRenderer.renderInsidePatch (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:71297:24)
    at renderSubComponent_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27972:21)
    at renderFromTag_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27886:14)
    at Toolbar.handleChildrenCaptured_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27633:9)
    at handleInterceptedCloseCall_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27158:24)
    at Object.handleCall (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:20623:12)
    at Toolbar.render (http://localhost:3000/o/osb-faro-web/dist/5.bundle.js?languageId=en_US:702:26)
    at JSXRenderer.renderIncDom (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:28540:43)
    at render (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27864:26)
    at JSXRenderer.renderInsidePatch (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:71297:24)
    at renderSubComponent_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27972:21)
    at renderFromTag_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27886:14)
    at handleChildRender_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27647:3)
    at renderChildTree (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27082:27)
    at renderChild (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27873:32)
    at IncrementalDomRenderer.renderChild (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:71262:28)
    at scope.iDOMHelpers.renderArbitrary (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:70605:34)
    at Array.forEach (<anonymous>)
    at Object.scope.iDOMHelpers.renderArbitrary (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:70601:9)
    at BasePage.render (http://localhost:3000/o/osb-faro-web/dist/5.bundle.js?languageId=en_US:311:16)
    at JSXRenderer.renderIncDom (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:28540:43)
    at render (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27864:26)
    at JSXRenderer.renderInsidePatch (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:71297:24)
    at renderSubComponent_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27972:21)
    at renderFromTag_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27886:14)
    at BaseListPage.handleChildrenCaptured_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27633:9)
    at handleInterceptedCloseCall_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27158:24)
    at Object.handleCall (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:20623:12)
    at BaseListPage.render (http://localhost:3000/o/osb-faro-web/dist/5.bundle.js?languageId=en_US:1041:26)
    at JSXRenderer.renderIncDom (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:28540:43)
    at render (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27864:26)
    at JSXRenderer.renderInsidePatch (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:71297:24)
    at renderSubComponent_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27972:21)
    at renderFromTag_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27886:14)
    at List.handleChildrenCaptured_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27633:9)
    at handleInterceptedCloseCall_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27158:24)
    at Object.handleCall (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:20623:12)
    at fnVoid (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:20604:37)
    at Object.handleCall (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:20623:12)
    at List.render (http://localhost:3000/o/osb-faro-web/dist/5.bundle.js?languageId=en_US:208:26)
    at JSXRenderer.renderIncDom (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:28540:43)
    at render (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27864:26)
    at JSXRenderer.renderInsidePatch (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:71297:24)
    at renderSubComponent_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27972:21)
    at renderFromTag_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27886:14)
    at Bundle.handleChildrenCaptured_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27633:9)
    at handleInterceptedCloseCall_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27158:24)
    at Object.handleCall (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:20623:12)
    at Bundle.render (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:92462:28)
    at JSXRenderer.renderIncDom (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:28540:43)
    at render (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27864:26)
    at JSXRenderer.renderInsidePatch (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:71297:24)
    at renderSubComponent_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27972:21)
    at renderFromTag_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27886:14)
    at Router.handleChildrenCaptured_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27633:9)
    at handleInterceptedCloseCall_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27158:24)
    at Object.handleCall (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:20623:12)
    at fnVoid (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:20604:37)
    at Object.handleCall (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:20623:12)
    at Router.render (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:40196:52)
    at IncrementalDomRenderer.renderIncDom (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:71276:15)
    at render (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27864:26)
    at IncrementalDomRenderer.renderInsidePatch (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:71297:24)
    at renderSubComponent_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27972:21)
    at renderFromTag_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27886:14)
    at handleChildRender_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27647:3)
    at renderChildTree (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27082:27)
    at renderChild (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27873:32)
    at IncrementalDomRenderer.renderChild (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:71262:28)
    at scope.iDOMHelpers.renderArbitrary (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:70605:34)
    at Array.forEach (<anonymous>)
    at Object.scope.iDOMHelpers.renderArbitrary (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:70601:9)
    at Provider.render (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:83408:17)
    at JSXRenderer.renderIncDom (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:28540:43)
    at render (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:27864:26)
    at http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:72148:3
    at f (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:72079:18)
    at callPatch_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:73171:2)
    at patch (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:73192:4)
    at JSXRenderer.patch (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:71228:22)
    at JSXRenderer.patch (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:28525:105)
    at tryPatchEmptyWithParent_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:73208:29)
    at patch (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:73189:7)
    at IncrementalDomRenderer.patch (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:71228:22)
    at IncrementalDomRenderer.update (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:71376:10)
    at Router.updateRenderer_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:75672:24)
    at Router.handleComponentStateChanged_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:75389:10)
    at Router.runListeners_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:70051:15)
    at Router.emit (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:69773:9)
    at State.emitBatchEvent_ (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:69104:19)
    at run (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:67954:13)
    at runIfPresent (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:67983:21)
    at onGlobalMessage (http://localhost:3000/o/osb-faro-web/dist/bundle.js?browserId=other&languageId=en_US&b=7010&t=1516841396000:68023:17)

Jan 25 '18 20:01 bryceosterhaus