CODEWITHSUNDEEP
javascriptreactjsecmascript-6material-ui
Xenology
Xenology

Reputation: 2452

Material UI component breaking React application

Trying to use a nested component within my application seems to be breaking my react app.

Using the following code the application loads fine:

import React from 'react';

const Manage = props => (
  <div>
    <span>Hello World!</span>
  </div>
)

export default Manage

However when I try and add one of the Material-UI compoenets to the page as such, the application compiles but refuses to load, throwing the following error:

warning.js:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

import React from 'react';
import {Card, CardHeader, CardText} from 'material-ui/Card';

const Manage = props => (
  <div>
    <Card>
        <CardHeader
          title="Without Avatar"
          subtitle="Subtitle"
          actAsExpander={true}
          showExpandableButton={true}
        />
        <CardText expandable={true}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
          Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
          Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
        </CardText>
    </Card>
  </div>
)



export default Manage

Upvotes: 1

Views: 286

Answers (1)

racsoraul
racsoraul

Reputation: 196

Your Card import is wrong. The Card component is a default export, not a named export. Change it to something like this:

import Card, {CardHeader, CardText} from 'material-ui/Card'

Upvotes: 1

Related Questions