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`

try import FlatButton from 'material-ui/FlatButton' or const FlatButton = require('material-ui/FlatButton').default — oobgam
– oobgam, Commented Jan 27, 2017 at 9:37

Mayank Shukla · Accepted Answer · 2017-01-27 09:54:08Z

2

If u r 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/

edited Jan 27, 2017 at 9:54

answered Jan 27, 2017 at 9:37

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

user3350597 Over a year ago

if i just copy/paste i get error TS1141: String literal expected. on line import { RaisedButton, MuiThemeProvider, getMuiTheme, FlatButton } from material-ui;

user3350597 Over a year ago

if i do it like that i get a lot of error: cannot find , but if i change import to const like this

const MuiThemeProvider = require('material-ui/styles/MuiThemeProvider');  const getMuiTheme = require('material-ui/styles/getMuiTheme').default;

i get

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)

and invariant.js:39 Uncaught Error: _registerComponent(...): Target container is not a DOM element.

Mayank Shukla Over a year ago

reason is you used id = 'root', i used id = 'container', just use the id that u defined in html page.

user3350597 Over a year ago

i've seen that. still not working. it is still giving me the same error in chrome console from the previous comment .

Mayank Shukla Over a year ago

have u used the proper id ??

|

Collectives™ on Stack Overflow

Uncaught Error: Element type is invalid: expected a string

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related