null owner in addComponentAsRefTo hard to fix #5631
Description
I am migrating my UI from react-1.13.3 to 1.14.3 and encountered the following error messages when loading my page:
Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).
I tried to fix it but I still have it with the following simple component:
const Test = React.createClass({
handleClick() {
console.log(this.refs.test.value);
},
render() {
return <div><input ref="test" onClick={this.handleClick}/></div>;
}
});
export default {
render(targetId) {
return ReactDOM.render(<Test hint="root"/>, document.getElementById(targetId));
}
};
So clearly my ref is set in the render method in this code that fails.
I investigated about the possibility of having twice React loaded and npm ls|grep react@ has only one line. I am not sure this proves anything since we have a complex build that generates our code (and probably the issue is somewhere in our build), but I ensured React code is only once in our output script, I also put a breakpoint in ReactCurrentOwner line 20 and was hit only once. I don't know if this is sufficient but for me we load React only once, so I went deeper.
When debugging I see that in the call to addComponentAsRefTo: function (component, ref, owner), owner is null. I then put breakpoints when ReactCurrentOwner.current is set to a non null value (ReactCompositeComponent lines 146 and 605, ReactMultiChild line 196 and 211). When I start my application, the breakpoint in ReactCompositeComponent:146 is hit twice (and at this time, this._currentElement.props is {hint:'root} but each time it is reset to null on line 150. The call to addComponentAsRefTo is done outside these two windows where the owner is not null.
What can I do to investigate more?