Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
bryceosterhaus opened this issue Jan 25, 2018 · 0 comments
Open

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

bryceosterhaus opened this issue Jan 25, 2018 · 0 comments

Comments

@bryceosterhaus
Copy link
Member

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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@bryceosterhaus