CODEWITHSUNDEEP
javascriptreactjsnpmmaterial-ui
Jonathan Viccary
Jonathan Viccary

Reputation: 732

React conflict when using Material UI

When attempting to use the AppBar in version 0.16.6 of Material UI, I get the following error

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.

which looks like a react conflict error.

My code is 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')
);

Has anyone encountered this, or does anyone know how to fix the problem?

Upvotes: 3

Views: 1347

Answers (1)

Mike Mathew
Mike Mathew

Reputation: 932

In the index.js file you will need this before the ReactDOM.render call:

// Needed for onTouchTap event handling
injectTapEventPlugin();

See if that clears up the issue. If not, then try deleting the node_modules folder and running npm install again.

Upvotes: 1

Related Questions