Uncaught Error: Element type is invalid: expected a string

Question

I've tried http://codepen.io/gaearon/pen/VKQwEo?editors=0010 from React's documentation it works fine.

I want to make a button using material-ui. What is wrong with this code?

    import * as React from "react";   
    import * as ReactDOM from "react-dom";
    import {Router, Route, IndexRoute} from "react-router";

    const FlatButton = require('material-ui/FlatButton');


    function Test(props){
    return(
    <div className="test">
    aaa
    <FlatButton label="Default" />
    </div>
    );
    }

    ReactDOM.render(
    <Test

    />
    , document.getElementById('root')
    );

Errors:

---

invariant.js:39 Uncaught Error: 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 `Test

warning.js:45 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 `Test`

---

Answer 1

If ur using material ui component then u need to import MuiThemeProvider, getMuiTheme from material-ui , and wrap ur component by MuiThemeProvider , try this it will work:

import React from "react";   
import ReactDOM from "react-dom";
import {Router, Route, IndexRoute} from "react-router";
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
const getMuiTheme = getMuiTheme({});

import FlatButton from 'material-ui';

 const App = (props) => {

    return (
         <FlatButton label='default'  />
    );
  }

ReactDOM.render(
   <MuiThemeProvider muiTheme={getMuiTheme}>
    <App />
  </MuiThemeProvider>,
  document.getElementById('container')
);

check jsfiddle for working example: https://jsfiddle.net/u7yvr564/