Why am I getting "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)..."?

Question

I'm having this problem Element 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, or you might have mixed up default and named imports. when I try to import a icon from React-Icons in my NextJs app.

See my code below.

import React from "react";

import MdPlayCircleOutline from "react-icons";

const Podcast = props => {
  return (
    <div className="podcast">
      <div className="podcastName">
        <h4>{props.title}</h4>
      </div>

      <MdPlayCircleOutline />
    </div>
  );
};

export default Podcast;

Why this?

Can you try importing like this: import {MdPlayCircleOutline} from "react-icons" — Molly Harper
– Molly Harper, Commented Feb 17, 2019 at 2:47

herodrigues · Accepted Answer · 2019-02-17 03:34:39Z

6

Each icon set has their own folder. For Material Design icons, it is './md'. So, the import should be:

import { MdPlayCircleOutline } from 'react-icons/md'

See: http://react-icons.github.io/react-icons/#usage

answered Feb 17, 2019 at 3:34

herodrigues

9671 gold badge7 silver badges12 bronze badges

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

1 Comment

Diego Cardona Over a year ago

Wow, I had not noticed that. Thanks you very much bro!

Collectives™ on Stack Overflow

Why am I getting "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)..."?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related