Use getmdl with React + React Router throw a DOMException

Question

This is a basic example and you can see the source code here and in action here.

Please, use getmdl branch

 git clone -b getmdl https://gitlab.com/problems/react_router_mdl_js.git

When I use mdl-js-layout in two components and try to navigate from one to another component, an exception is throw in the console:

REMEMBER: THE DRAWER SHOULD BE WORK

I try create a react component MdlLayout and call upgradeDom

componentDidUpdate () {
  window.componentHandler.upgradeDom()
}

I try to do this manually

componentDidMount () {
  const layout = findDOMNode(this.refs.layout)
  window.componentHandler.upgradeElement(layout)
}

componentWillUnmount () {
  const layout = findDOMNode(this.refs.layout)
  window.componentHandler.downgradeElements(layout)
}

But nothing works. I read several articles about that, like this one, this, this and this

Follow the exception

DOMChildrenOperations.js?568f:65 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at removeChild (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:503:1), <anonymous>:65:14)
    at Object.processUpdates (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:503:1), <anonymous>:209:11)
    at Object.dangerouslyProcessChildrenUpdates [as processChildrenUpdates] (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1550:1), <anonymous>:29:27)
    at processQueue (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1690:1), <anonymous>:137:29)
    at ReactDOMComponent._updateChildren (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1690:1), <anonymous>:355:9)
    at ReactDOMComponent.updateChildren (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1690:1), <anonymous>:299:12)
    at ReactDOMComponent._updateDOMChildren (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1522:1), <anonymous>:936:12)
    at ReactDOMComponent.updateComponent (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1522:1), <anonymous>:754:10)
    at ReactDOMComponent.receiveComponent (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1522:1), <anonymous>:716:10)
    at Object.receiveComponent (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:286:1), <anonymous>:125:22)
removeChild @ DOMChildrenOperations.js?568f:65
processUpdates @ DOMChildrenOperations.js?568f:209
dangerouslyProcessChildrenUpdates @ ReactDOMIDOperations.js?2d83:29
processQueue @ ReactMultiChild.js?9682:137
_updateChildren @ ReactMultiChild.js?9682:355
updateChildren @ ReactMultiChild.js?9682:299
_updateDOMChildren @ ReactDOMComponent.js?ab8a:936
updateComponent @ ReactDOMComponent.js?ab8a:754
receiveComponent @ ReactDOMComponent.js?ab8a:716
receiveComponent @ ReactReconciler.js?399b:125
_updateRenderedComponent @ ReactCompositeComponent.js?d2b3:754
_performComponentUpdate @ ReactCompositeComponent.js?d2b3:724
updateComponent @ ReactCompositeComponent.js?d2b3:645
receiveComponent @ ReactCompositeComponent.js?d2b3:547
receiveComponent @ ReactReconciler.js?399b:125
_updateRenderedComponent @ ReactCompositeComponent.js?d2b3:754
_performComponentUpdate @ ReactCompositeComponent.js?d2b3:724
updateComponent @ ReactCompositeComponent.js?d2b3:645
receiveComponent @ ReactCompositeComponent.js?d2b3:547
receiveComponent @ ReactReconciler.js?399b:125
_updateRenderedComponent @ ReactCompositeComponent.js?d2b3:754
_performComponentUpdate @ ReactCompositeComponent.js?d2b3:724
updateComponent @ ReactCompositeComponent.js?d2b3:645
performUpdateIfNecessary @ ReactCompositeComponent.js?d2b3:561
performUpdateIfNecessary @ ReactReconciler.js?399b:157
runBatchedUpdates @ ReactUpdates.js?8e6b:150
perform @ Transaction.js?f15f:140
perform @ Transaction.js?f15f:140
perform @ ReactUpdates.js?8e6b:89
flushBatchedUpdates @ ReactUpdates.js?8e6b:172
closeAll @ Transaction.js?f15f:206
perform @ Transaction.js?f15f:153
batchedUpdates @ ReactDefaultBatchingStrategy.js?e9be:62
batchedUpdates @ ReactUpdates.js?8e6b:97
dispatchEvent @ ReactEventListener.js?944f:147

I cloned your repo from https://gitlab.com/problems/react_router_mdl_js into my machine and the example ran without the error you mentioned. Could you try cleaning the yarn cache and your node_modules folder and reinstall the dependencies? — hazardous, Apr 11 '17 at 06:24
@hazardous, please clone the [exactly commit](https://gitlab.com/problems/react_router_mdl_js/tree/96f091242ee60bebd93ca93ce208a1fd91d0e159). The branch master I`m changing to do others tests. — ridermansb, Apr 11 '17 at 21:48

score 2 · Answer 1 · edited May 23 '17 at 12:25

2

The problem here is that the upgradeElement and downgradeElement APIs are modifying the DOM element which was generated by React, causing it to throw exceptions in the reconcilitation phase where it tries to replace the view1 route component with view2 route component (or vice-versa). You can check this theory by commenting these APIs calls in MdlLayout.jsx and then there will be no more errors when switching the routes.

Any library which tries to work on the DOM directly doesn't work out of the box with React. For possible workarounds, please read this and this post.

UPDATES:

Here's a fork of your project with the MDL calls commented out, checkout the temp branch from the project and run the code. The router works as expected.

As for manipulation of the DOM, here's a screenshot of your DOM without the MDL calls -

And here's with the upgradeElement call -

Notice that the MDL library is manipulating DOM without React's consent.

edited May 23 '17 at 12:25

Community

1
1

answered Apr 12 '17 at 11:41

hazardous

10,627
2
40
52

If you remove all `upgradeElement` and `downgradeElement` calls, you will still get same results. **I'm not trying manipule the DOM**, it's the getmdl library, so these examples that you post won't work. – ridermansb Apr 12 '17 at 22:15
Not sure where I said your code is manipulating DOM, it is the MDL library which you are using which is causing the issues here. Anyways, see updates in my original answer with links to a fork with routing working properly (when MDL stuff is removed). – hazardous Apr 13 '17 at 06:06
Yes, I know that MDL manipulating the DOM. How can I use MDL with React, including Drawer In your code, you broke the Drawer. (Check in your screenshot). Any component that use `mdl-js-*` will throw an error because MDL manipulate the dom. If you use just a simple component from MDL will no throw any error. – ridermansb Apr 13 '17 at 07:34
I doubt you will be able to use MDL easily with React. There are several good material component libraries which you can use like material-ui and react-toolbox. Any specific reasons you need MDL? – hazardous Apr 13 '17 at 07:41
It's the official implementation of Google, its pure JS/CSS. I don't want to use Framework Wrapper every time I have problems like that. Check [this thread](https://www.reddit.com/r/reactjs/comments/64nc0i/problems_use_material_design_frameworks_with_react/) – ridermansb Apr 13 '17 at 08:07
1

I can relate with you on this. Unfortunately there's nothing which fits all requirements at the moment. – hazardous Apr 13 '17 at 08:20
Ok, no worries. Thanks. – ridermansb Apr 13 '17 at 08:24

Use getmdl with React + React Router throw a DOMException

1 Answers1