"Invalid argument provided to downgrade MDL nodes" hides the real error.

[jdelafon]

I am importing react-mdl from current master branch (https://cdn.rawgit.com/tleunen/react-mdl/master/extra/material.min.js), and React 15.2.

Any time I have a runtime error happening during render, such as applying a function that does not exist, instead of reporting the real error to the console, I see only the exact same, uninformative traceback:

Error: Invalid argument provided to downgrade MDL nodes.

d   @   mdlComponentHandler.js:400
componentWillUnmount    @   index.js:33
proxiedComponentWillUnmount @   createPrototypeProxy.js:81
unmountComponent    @   ReactCompositeComponent.js:405
unmountComponent    @   ReactReconciler.js:83
_updateRenderedComponent    @   ReactCompositeComponent.js:740
_performComponentUpdate @   ReactCompositeComponent.js:715
updateComponent @   ReactCompositeComponent.js:634
receiveComponent    @   ReactCompositeComponent.js:534
receiveComponent    @   ReactReconciler.js:131
_updateRenderedComponent    @   ReactCompositeComponent.js:737
_performComponentUpdate @   ReactCompositeComponent.js:715
updateComponent @   ReactCompositeComponent.js:634
receiveComponent    @   ReactCompositeComponent.js:534
receiveComponent    @   ReactReconciler.js:131
performUpdateIfNecessary    @   ReactCompositeComponent.js:546
performUpdateIfNecessary    @   ReactReconciler.js:165
runBatchedUpdates   @   ReactUpdates.js:151
perform @   Transaction.js:138
perform @   Transaction.js:138
perform @   ReactUpdates.js:90
flushBatchedUpdates @   ReactUpdates.js:173
closeAll    @   Transaction.js:204
perform @   Transaction.js:151
batchedUpdates  @   ReactDefaultBatchingStrategy.js:63
enqueueUpdate   @   ReactUpdates.js:201
enqueueUpdate   @   ReactUpdateQueue.js:25
enqueueElementInternal  @   ReactUpdateQueue.js:216
(anonymous function)    @   ReactMount.js:253
scrollMonitor   @   ReactMount.js:241
_updateRootComponent    @   ReactMount.js:252
_renderSubtreeIntoContainer @   ReactMount.js:344
render  @   ReactMount.js:392
renderComponent @   main.js:31

Would it be possible to rethrow the original error that got caught ?

In case I am doing something wrong, here is the syntax I am using to mount elements with MDL style, which is the only "downgrade" I can see in the project:

componentDidMount() {
    window.componentHandler.upgradeElement(this.refs.root);
}
componentWillUnmount() {
    window.componentHandler.downgradeElements(this.refs.root);
}

[tleunen]

Thanks for reporting the issue @jdelafon. Are you able to reproduce the issue outside of your project, in a small example for example? This will help me finding a proper fix to this.

[jdelafon]

Not yet. But I noticed that it happens when I call something undefined, like undefinedFunction(12) inside componentDidMount() of any of my components that is a child of the component where I call downgradeElements as above.

[jdelafon]

So this should reproduce:

class Main extends React.Component {
    componentDidMount() {
        window.componentHandler.upgradeElement(this.refs.root);
    }
    componentWillUnmount() {
        window.componentHandler.downgradeElements(this.refs.root);
    }

    render() {return 
         <div ref="root">
                <Sub />
         </div>;
    }
}

class Sub extends React.Component {
    componentDidMount() {
        undefinedFunction(12)
    }

    render() {
        return <div><div/>
    }
}

but I don't know really how to create a small example project with this code to test.

[tleunen]

The thing is, you should not upgrade/downgrade any of the component yourself, if you're using components from react-mdl.

[jdelafon]

Ah. I took a full boilerplate package to start, and it was already written so I left it. But indeed apparently I can remove that safely. I'd better ask them why it was there in the first place, then. If it is their mistake I'll close.

[tleunen]

Because it looks like an issue with react-static-boilerplate, I'm closing the issue.