Material-ui: Conflicting versions of React required, causing Invariant Violation

[J3VS]

When I npm install material-ui (version 0.16.6), there are two versions of react that are required: 15.4.2. and 15.0.0

├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── UNMET PEER DEPENDENCY react@^15.4.2
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ ├─┬ [email protected]
│ │ │ │ │ ├─┬ [email protected]
│ │ │ │ │ │ └── [email protected]
│ │ │ │ │ └── [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── UNMET PEER DEPENDENCY react@^15.4.2
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └── [email protected]
├── UNMET PEER DEPENDENCY react@^15.0.0
├── UNMET PEER DEPENDENCY react-dom@^15.0.0
└── UNMET PEER DEPENDENCY react-tap-event-plugin@^1.0.0 || ^2.0.0

when I attempt to use the AppBar component, I get the following error message which I assume is from the react version conflicts:

Uncaught Error: 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).

Code as follows:
app.js

import React, { Component } from 'react';

import AppBar from 'material-ui/AppBar';
import {deepOrange500} from 'material-ui/styles/colors';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

const muiTheme = getMuiTheme({
  palette: {
    accent1Color: deepOrange500,
  },
});

class App extends Component {
  render() {
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <AppBar/>
      </MuiThemeProvider>
    );
  }
}

export default App;

index.js

import injectTapEventPlugin from 'react-tap-event-plugin';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

[mbrookes]

Dupe of #2818 Try removing node_modules/material-ui/node_modules/react.

Those dependencies don't conflict...

(Also, you'll need to add injectTapEventPlugin() if you want click events to work.)

[J3VS]

It might just be me not understanding what you mean, but in node_modules/material-ui, there is no directory node_modules

[mbrookes]

Then the problem definitely doesn't originate with Material-UI. 😄 (Seriously, if it was that broken, many people would be complaining!)

Try deleting and reinstalling node_modules, otherwise take a look at the suggestions in the linked issue.

[kimkha]

I have same problem. Also try to remove node_modules and reinstall multiple times, but no luck.

My case: I write a new module, that depends on Material-UI. And that module will include in another team project, which also include Material-UI. It means:

team_project
|--node_modules
| |--- material-ui
| |--- my_module
| | |--- node_modules
| | | |--- material-ui

All module is newest version...