Material-ui: Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs.

[nickzuber]

I'm unable to use Material UI at the moment because every time I try to compile my code and run it on the client, it fails. If I pipe down the rendered React output to the client, I get this error...

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:

... and then it goes on to tell me that the rendered markup differs where the Material UI component is. Am I not supposed to pipe the rendered markup to the client anymore, or am I doing something wrong?

When I remove the rendered markup from the client, _that_ warning goes away, however the core problem still subsists. Attempting to hover over a RaisedButton or click it etc, is throwing errors such as these:

Uncaught 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
Uncaught TypeError: Cannot read property 'isKeyboardFocused' of undefined
Uncaught TypeError: Cannot read property 'componentWillLeave' of undefined

Here is a simplified version of the code I have which is causing me these issues:

const React = require('react');
const RaisedButton = require('material-ui/lib/raised-button');

const app = React.createClass({
  render: function(){
    return(
      <div>
        <RaisedButton label="someLabel" />
      </div>
    );
  }
});

module.exports = app;

I'm compiling my application using webpack v1.5.0, using material-ui v0.14.2

Any help is greatly appreciated - thanks.

[dagatsoin]

Seems to be be related to #2818. Does not ?

[nickzuber]

@dagatsoin Ah thank you!! That fixed my problem with that particular error, however I still get the warning if I try to pipe down the rendered markup to the client. Is this intended or is there a way around this?

[dagatsoin]

Sorry I don't know about the warning.

[oliviertassinari]

however I still get the warning if I try to pipe down the rendered markup to the client.

@nickzuber I doubt that's an issue with material-ui. At the moment, that's true we have some issues with the server-side rendering, but that's only affecting the style.
Your warning makes me think, that it's more serious.

[nickzuber]

After some snooping around, I found the solution to my other issue with the client and server data not matching here:

https://github.com/callemall/material-ui/pull/2172#issuecomment-157404901

All of the problems I've encountered have been resolved, thanks everyone who helped!

[p4bloch]

rm -rf node_modules && npm install solved this for me

[govindakn]

I too faced the same problem when I have different versions of React installed by npm during material-ui installation.
Then I updated npm to 3.x, uninstalled material-ui, updated react to 15.3 and installed material-ui again. And now its working fine for me.

Thanks for all who helped me by their posts.