React DOM tree root should always have a node reference

I’ve built a task execution pipeline utilizing React v14 and I’ve begun testing it against React v15 and have noticed that all of a sudden I’m getting an invariant error: React DOM tree root should always have a node reference.

When I comment the line that is causing this error (https://github.com/facebook/react/blob/3b96650e39ddda5ba49245713ef16dbc52d25e9e/src/renderers/dom/client/ReactDOMComponentTree.js#L171) everything works as it did with v14, and all of my unit tests pass. I assume this check is important to the new internal updates that have been made since v14.

I was able to make it work with a hacky bit of code that adds properties to the instance, _flags and _nativeNode, you can see this here: https://github.com/mbrio/react-pipeline/blob/react-15/src/startTasks.js#L8-L9.

I believe the issue is that with v14 I was able to use the server rendering code but in v15 I can no longer call forceUpdate or setState without errors occurring. Is there a way of bypassing the above error using the client renderer, or a way of calling setState/forceUpdate with the server renderer?

[rafaelbiten]

I was having the same problem and after reading a few comments I understood the problem. I have a modal that can be closed by clicking on the dark background overlay or by clicking a close button inside the modal content container. Clicking the overlay was fine, but clicking the button would cause the error since it was also triggering the same event on the overlay.

Adding event.stopPropagation(); to the event handler fixed the issue for me.

[mnpenner]

I’m hitting this error when I call close() in this function:

export default function openReactModal(componentFn, modalProps={}) {
    let reactRoot = document.createElement('div');
    document.body.appendChild(reactRoot);
    const close = () => {
        if(reactRoot === null) {
            console.warn('You shouldn\'t call close() more than once');
            return;
        }

        ReactDOM.unmountComponentAtNode(reactRoot);
        reactRoot.parentNode.removeChild(reactRoot);
        reactRoot = null;
    };
    ReactDOM.render(<Modal isOpen={true} {...modalProps}>{componentFn({close})}</Modal>, reactRoot);
}

Why can’t I unmount a root component?