<h3 dir="auto">Problem description</h3>
<p dir="auto">Button href component return error when clicked.</p>
<h3 dir="auto">Steps to reproduce</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import MenuIcon from 'material-ui-icons/Menu';
import AppBar from 'material-ui/AppBar';
import Button from 'material-ui/Button';
import Hidden from 'material-ui/Hidden';
import IconButton from 'material-ui/IconButton';
import { withStyles } from 'material-ui/styles';
import { withRouter, Link } from 'react-router-dom';
import Toolbar from 'material-ui/Toolbar';
import React, { Component } from 'react';
import { LogoDiv, NavWrapper, Nav, styles } from './styles';

const navs = [
    { label: 'Home', url: '/' },
    { label: 'How to', url: '/' },
    { label: 'Faq', url: '/' },
    { label: 'Area', url: '/' },
];

class Header extends Component {
    render() {
        const classes = this.props.classes;

        return (
            &lt;AppBar position=&quot;fixed&quot; color=&quot;default&quot;
                    classes={{ root: classes.appBarRoot, colorDefault: classes.appBarBg }}&gt;
                &lt;Toolbar classes={{ root: classes.toolBar }}&gt;
                    &lt;Hidden mdUp&gt;
                        &lt;IconButton aria-label=&quot;Menu&quot;&gt;
                            &lt;MenuIcon /&gt;
                        &lt;/IconButton&gt;
                    &lt;/Hidden&gt;

                    &lt;Hidden mdDown&gt;
                        &lt;NavWrapper&gt;
                            {navs.map(nav =&gt; (
                                &lt;Button href={nav.url}&gt;{nav.label}&lt;/Button&gt;
                            ))}
                        &lt;/NavWrapper&gt;
                    &lt;/Hidden&gt;

                    &lt;LogoDiv /&gt;

                    &lt;div style={{ display: 'flex', flex: 1, justifyContent: 'flex-end' }}&gt;
                        &lt;Button raised color=&quot;primary&quot;&gt;Login&lt;/Button&gt;
                    &lt;/div&gt;
                &lt;/Toolbar&gt;
            &lt;/AppBar&gt;
        );
    }
}

export default withStyles(styles)(withRouter((Header)));
"><pre class="notranslate"><code class="notranslate">import MenuIcon from 'material-ui-icons/Menu';
import AppBar from 'material-ui/AppBar';
import Button from 'material-ui/Button';
import Hidden from 'material-ui/Hidden';
import IconButton from 'material-ui/IconButton';
import { withStyles } from 'material-ui/styles';
import { withRouter, Link } from 'react-router-dom';
import Toolbar from 'material-ui/Toolbar';
import React, { Component } from 'react';
import { LogoDiv, NavWrapper, Nav, styles } from './styles';

const navs = [
    { label: 'Home', url: '/' },
    { label: 'How to', url: '/' },
    { label: 'Faq', url: '/' },
    { label: 'Area', url: '/' },
];

class Header extends Component {
    render() {
        const classes = this.props.classes;

        return (
            &lt;AppBar position="fixed" color="default"
                    classes={{ root: classes.appBarRoot, colorDefault: classes.appBarBg }}&gt;
                &lt;Toolbar classes={{ root: classes.toolBar }}&gt;
                    &lt;Hidden mdUp&gt;
                        &lt;IconButton aria-label="Menu"&gt;
                            &lt;MenuIcon /&gt;
                        &lt;/IconButton&gt;
                    &lt;/Hidden&gt;

                    &lt;Hidden mdDown&gt;
                        &lt;NavWrapper&gt;
                            {navs.map(nav =&gt; (
                                &lt;Button href={nav.url}&gt;{nav.label}&lt;/Button&gt;
                            ))}
                        &lt;/NavWrapper&gt;
                    &lt;/Hidden&gt;

                    &lt;LogoDiv /&gt;

                    &lt;div style={{ display: 'flex', flex: 1, justifyContent: 'flex-end' }}&gt;
                        &lt;Button raised color="primary"&gt;Login&lt;/Button&gt;
                    &lt;/div&gt;
                &lt;/Toolbar&gt;
            &lt;/AppBar&gt;
        );
    }
}

export default withStyles(styles)(withRouter((Header)));

</code></pre></div>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: next</li>
<li>React: next</li>
<li>Browser: Chrome</li>
</ul>
<h3 dir="auto">Problem description</h3>
<p dir="auto">Upgrading to React V16 throws error: this.updater.enqueueCallback is not a function</p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">yarn add react@next react-dom@next</p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: v1.0.0-beta.5</li>
<li>React: <a class="user-mention notranslate" data-hovercard-type="organization" data-hovercard-url="/orgs/next/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/next">@next</a></li>
<li>Browser: Chrome</li>
</ul>
<h3 dir="auto">Description</h3>
<p dir="auto">When clicking a button, dropdown etc.  this.updater.enqueueCallback is not a function exception is thrown.</p>
<p dir="auto">Console says the following:<br>
<strong>The above error occurred in the  Transition component</strong></p>
<h3 dir="auto">Images &amp; references</h3>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/6877570/29413673-3355e5b8-832b-11e7-8490-7e5fcd807f8e.png"><img src="https://user-images.githubusercontent.com/6877570/29413673-3355e5b8-832b-11e7-8490-7e5fcd807f8e.png" alt="screen shot 2017-08-17 at 9 03 37 am" style="max-width: 100%;"></a></p>