Material UI component breaking React application

Question

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

@Subin can you be a bit more clear please?

Xenology
– Xenology

2018-03-31 09:33:15 +00:00
Commented Mar 31, 2018 at 9:33 — Xenology
– Xenology, Commented Mar 31, 2018 at 9:33
Ignore that comment

Subin Sebastian
– Subin Sebastian

2018-03-31 09:49:14 +00:00
Commented Mar 31, 2018 at 9:49 — Subin Sebastian
– Subin Sebastian, Commented Mar 31, 2018 at 9:49

racsoraul · Accepted Answer · 2018-03-31 10:37:47Z

1

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'

answered Mar 31, 2018 at 10:37

racsoraul

1961 silver badge10 bronze badges

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

Collectives™ on Stack Overflow

Material UI component breaking React application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related