× 错误：元素类型无效：应为字符串（对于内置组件）

Question

在我的代码中出现以下错误。我无法找到错误是什么。请帮忙。 × 错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

Check the render method of `LoginForm`..   


 LoginForm.js

    import React from "react";
    import { BoxContainer, FormContainer, MutedLink, SubmitButton, Input } from "./common";
    import { Marginer } from "../marginer";
    
    export function LoginForm(props) {
        return ( 
        <BoxContainer>
            <FormContainer>
                <Input type ="email" placeholder="Email" />
                <Input type ="password" placeholder="Password" />
                <Marginer direction="vertical" margin={5} />
                <MutedLink href="#">Forget your password?</MutedLink>
                <Marginer direction="vertical" margin="lem" />
                <SubmitButton type="submit">Signin</SubmitButton>
            </FormContainer>
        </BoxContainer>
        );
    }
    
    index.js
    
    import React from 'react'
    
    import styled from 'styled-components'
    import { LoginForm } from './loginForm';
    
    const BoxContainer = styled.div`
    width: 280px;
    min-height: 550px;
    display: flex;
    flex-direction: column;
    border-radius: 19px;
    background-color: #fff;
    box-shadow: 0 0 2px rgba(15, 15, 15, 0.28);
    position: relative;
    overflow: hidden;
    `;
    
    const TopContainer =styled.div`
    width: 100%;
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 1.8em;
    padding-bottom: 5em;
    `;
    
    const BackDrop = styled.div`
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 160%;
    height: 550px;
    border-radius: 50%;
    top: -290px;
    left: -70px;
    transform: rotate(60deg);
    background: rgb(241, 196, 15);
    background: linear-gradient(
        58deg,
        rgba(241,196,15,1) 20%,
        rgba(243,172,18,1) 100%
    )
    `;
    
    const HeaderContainer = styled.div`
    width:100%;
    display: flex;
    flex-direction:column;
    margin:auto;
    `;
    
    const HeaderText = styled.h2`
    font-size: 30px;
    font-weight: 600;
    line-height: 1.24;
    color: #fff;
    z-index: 10;
    margin: 0;
    margin-right: 218px;
    `;
    const SmallText = styled.h5`
    color:#ece5e5;
    font-weight: 500;
    font-size: 11px;
    z-index: 10;
    margin:0;
    margin-right: 147px;
    margin-top: 6px;
    `;
    
    const InnerContainer = styled.div`
    width: 100%;
    display: flex;
    flex-direction:column;
    `;
    
    
    export function AccountBox(props) {
        return ( 
            <BoxContainer>
            <TopContainer>
                <BackDrop />
                <HeaderContainer>
                <HeaderText>Welcome</HeaderText>
                <HeaderText>Back</HeaderText>
                <SmallText>please sign-in to continue!</SmallText>
                </HeaderContainer>
            </TopContainer>
            <InnerContainer>
            <LoginForm />
            </InnerContainer>
        </BoxContainer>
        );
    }

marginer.js

import React from "react";
import styled from "styled-components";

const HorizontalMargin = styled.span`
  display: flex;
  width: ${({ margin }) =>
    typeof margin === "string" ? margin : `${margin}px`};
`;

const VerticalMargin = styled.span`
  display: flex;
  height: ${({ margin }) =>
    typeof margin === "string" ? margin : `${margin}px`};
`;

function Marginer(props) {
  const { direction } = props;

  if (direction === "horizontal") return <HorizontalMargin {...props} />;
  else {
    return <VerticalMargin {...props} />;
  }
}

Marginer.defaultProps = {
  direction: "horizontal",
};

export { Marginer };