<p dir="auto">Getting the following error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `MainBar`."><pre class="notranslate"><code class="notranslate">Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `MainBar`.
</code></pre></div>
<p dir="auto">MainBar is:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export class MainBar extends React.Component&lt;any, any&gt;{
    render() {
        return &lt;AppBar title={&lt;span&gt;Title&lt;/span&gt;}
/&gt;
    }
}"><pre class="notranslate"><code class="notranslate">export class MainBar extends React.Component&lt;any, any&gt;{
    render() {
        return &lt;AppBar title={&lt;span&gt;Title&lt;/span&gt;}
/&gt;
    }
}
</code></pre></div>
<p dir="auto">AppBar transpiles to:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var React = require('react');
var AppBar = require('material-ui/lib/app-bar');
var MainBar = (function (_super) {
    __extends(MainBar, _super);
    function MainBar() {
        _super.apply(this, arguments);
    }
    MainBar.prototype.render = function () {
        return React.createElement(AppBar, {&quot;title&quot;: React.createElement(&quot;span&quot;, null, &quot;Title&quot;)});
    };
    return MainBar;
})(React.Component);"><pre class="notranslate"><code class="notranslate">var React = require('react');
var AppBar = require('material-ui/lib/app-bar');
var MainBar = (function (_super) {
    __extends(MainBar, _super);
    function MainBar() {
        _super.apply(this, arguments);
    }
    MainBar.prototype.render = function () {
        return React.createElement(AppBar, {"title": React.createElement("span", null, "Title")});
    };
    return MainBar;
})(React.Component);
</code></pre></div>
<p dir="auto">So apparently AppBar is an object, not a class.</p>
<p dir="auto">Any ideas?</p>
<p dir="auto"><a href="https://github.com/callemall/material-ui/releases/tag/v0.14.1">0.14.1</a> upgraded to babel 6, which introduced a breaking change for commonjs require(): <a href="https://phabricator.babeljs.io/T2212" rel="nofollow">https://phabricator.babeljs.io/T2212</a></p>
<p dir="auto">The error is: <code class="notranslate">Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of &lt;SomeComponent&gt;</code></p>
<p dir="auto">Using a plugin such as this: <a href="https://www.npmjs.com/package/babel-plugin-add-module-exports" rel="nofollow">https://www.npmjs.com/package/babel-plugin-add-module-exports</a> might provide a solution to give users time to either added the necessary <code class="notranslate">.default</code> to <code class="notranslate">require()</code>s, or transition to ES6 style imports.</p>