Using Material Design Lite with React

Question

I am trying to use MDL on an existing project that uses React, and I am running into several issues. Things seem fine on the first load, although there are many warning messages:

Warning: ReactMount: Root element has been removed from its original container. New container:

This happens pretty much for every DOM element that has a class recognized by MDL (examples: mdl-layout, mdl-layout__content, etc.) and it happens on any DOM changes.

Further, when changing routes, there is an "Invariation Violation" error:

Uncaught Error: Invariant Violation: findComponentRoot(..., .0.2.0.1.1.0.0.0.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser)...

Does this mean that MDL and React are pretty much incompatible?

Update: The issue disappears if the element with class="mdl-js-layout" is not the topmost element in the reactjs render function. Once I wrapped that element, all is good.

Answer 1

Try to wrap a DIV element outside, I just fixed that problem in this way.

If you are using Redux + React + MDL + React-Router, You can wrap a DIV element to Provider element:

import React, { createStore }      from 'react';
import { Provider }                from 'react-redux';
import Router, { HistoryLocation } from 'react-router';

var store = createStore();

Router.run(routes, HistoryLocation, (Handler, state) => {
    React.render((
        <div>
            <Provider store={store}>
            {
                () => <Handler {...state} />
            }
            </Provider>
        </div>
    ), document.body);
});

Hope it can help you :)

Answer 2

The first and second errors are related to each other, take a look at MDL's layout source code. I would say that the following causes the mutation of your React root element (which is the mdl-js-layout component):

var container = document.createElement('div');
container.classList.add(this.CssClasses_.CONTAINER);
this.element_.parentElement.insertBefore(container, this.element_);
this.element_.parentElement.removeChild(this.element_);
container.appendChild(this.element_);

If you take a look at the official example, you can see that MDL massively changes your markup and that is exactly what React doesn't like.

---

BTW: I also have composed an article which studies the combination of React with MDL.