React and Material-UI: Uncaught Invariant Violation: removeComponentAsRefFrom(...)

Question

I develop React components using Material-UI:

This works fine

MainView.js

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { List, ListItem } from 'material-ui/List';

class MainView extends Component {
  render() {
    return (
      <MuiThemeProvider>
        <List>
          <ListItem primaryText="item 1" />
          <ListItem primaryText="item 2" />
          <ListItem primaryText="item 3" />
        </List>
      </MuiThemeProvider>
    );
  }
}

export default MainView;

but when I move <List> to another component

MainView.js

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyListView from './MyListView';
// this import was removed as unused as <List> moved to MyListView:
// import { List, ListItem } from 'material-ui/List';

class MainView extends Component {

  render() {
    return (
      <MuiThemeProvider>
        <MyListView />
      </MuiThemeProvider>
    );
  }
}

MyListView.js

import React, { Component } from 'react';
import { List, ListItem } from 'material-ui/List';

class MyListView extends Component {

  render() {
    return (
      <List>
        <ListItem primaryText="item 1" />
        <ListItem primaryText="item 2" />
        <ListItem primaryText="item 3" />
      </List>
    );
  }
}

export default MyListView;

in this case I receive this:

Uncaught Invariant Violation: removeComponentAsRefFrom(...): Only a ReactOwner can have refs. You might be removing a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: link).

main.js

ReactDOM.render((
  <Provider store={store}>
    <Router history={hashHistory}>
      <Route path="/" component={App} />
      <Route path="/test" component={MainView} />
    </Router>
  </Provider>
), document.getElementById('root'));

Any suggestion to escape this? Thank you!

JeremyK JeremyK · Accepted Answer · 2016-10-05T21:34:36

I see this error if I have added a component to a render method that is either misspelt or not imported - and therefore not defined in the current scope.

If watching the browser console I will see:

[HMR] Cannot apply update. Need to do a full reload!
app.js:90432 [HMR] ReferenceError: NewComponent is not defined

However if I refresh the page I then see in both the browser and the server log:

Invariant Violation: removeComponentAsRefFrom(...): Only a ReactOwner can have refs. You might be removing 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).
   at invariant (E:\testing\node-seed\tmp\webpack:\~\fbjs\lib\invariant.js:38:1)

Fixing the component name, or importing it, resolves this error in this case.

React and Material-UI: Uncaught Invariant Violation: removeComponentAsRefFrom(...)

1 Answers