Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object

Question

I am getting this error:

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 

This is my code:

var React = require('react') var ReactDOM =  require('react-dom') var Router = require('react-router') var Route = Router.Route var Link = Router.Link  var App = React.createClass({   render() {     return (       <div>         <h1>App</h1>         <ul>           <li><Link to="/about">About</Link></li>         </ul>       </div>     )   } })  var About = require('./components/Home') ReactDOM.render((   <Router>     <Route path="/" component={App}>       <Route path="about" component={About} />     </Route>   </Router> ), document.body) 

My Home.jsx file:

var React = require('react'); var RaisedButton = require('material-ui/lib/raised-button');  var Home = React.createClass({   render:function() {     return (         <RaisedButton label="Default" />     );   }, });  module.exports = Home; 

Answer 1

In my case (using Webpack) it was the difference between:

import {MyComponent} from '../components/xyz.js'; 

vs

import MyComponent from '../components/xyz.js'; 

The second one works while the first is causing the error. Or the opposite.

Answer 2

you need export default or require(path).default

var About = require('./components/Home').default