为什么我得到 "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)..."？

Question

当我尝试在我的 NextJs 应用程序中从 React-Icons 导入图标时，我遇到了这个问题 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.。

请参阅下面的代码。

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;

这是为什么？

Answer 1

每个图标集都有自己的文件夹。对于 Material 个设计图标，它是 './md'。所以，导入应该是：

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

参见：http://react-icons.github.io/react-icons/#usage

为什么我得到 "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)..."？

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

html

reactjs

next.js