I'm having an error that I can't solve, when calling the "SocialLinks" component, it displays the following error message
Error: 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.
Code with "SocialLinks" component
SocialLinks > index.js
import React from "react"
import Icons from "./Icons"
import links from "./content"
import * as S from "./styled"
const SocialLinks = () => (
<S.SocialLinksWrapper>
<S.SocialLinksList>
{links.map((link, i) => {
const Icon = Icons[link.label]
return (
<S.SocialLinksItem key={i}>
<S.SocialLinksLink
href={link.url}
title={link.label}
target="_blank"
rel="noopener noreferrer"
>
<S.IconWrapper>
<Icon />
</S.IconWrapper>
</S.SocialLinksLink>
</S.SocialLinksItem>
)
})}
</S.SocialLinksList>
</S.SocialLinksWrapper>
)
export default SocialLinks
It's called in the sidebar
Sidebar > index.js
import React from "react"
import Profile from "../Profile"
import SocialLinks from "../SocialLinks"
import * as S from "./styled"
const Sidebar = () => (
<S.SidebarWrapper>
<Profile />
<SocialLinks />
</S.SidebarWrapper>
)
export default Sidebar
SocialLinks > content.js
const links = [
{
label: "Github",
url: `https://a.url`,
},
{
label: "Twitter",
url: `https://a.url`,
},
{
label: "Linkedin",
url: `https://a.url/`,
},
]
export default links
SocialLinks > Icons.js
import { Github } from "@styled-icons/boxicons-logos/Github"
import { Twitter } from "@styled-icons/boxicons-logos/Twitter"
import { LinkedinSquare } from "@styled-icons/boxicons-logos/LinkedinSquare"
const Icons = {
Github,
Twitter,
LinkedinSquare,
}
export default Icons
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…