Error : React.createElement: type is invalid : but got: undefined., Element type is invalid: but got: undefined

Question

I am getting this error:

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, or you might have mixed up default and named imports. Check the render method of EditContainer.

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. Check the render method of EditContainer.

Edit.jsx

import React from 'react';
import { withRouter } from 'react-router';
import {connect} from "react-redux";
//styles
import styleArticle from '../../Styles/Article.css';
import styleTag from '../../Styles/tag.css'
//action
import * as ActionArticle from '../../Data/Article/action';
import * as ActionMedia from '../../Data/Media/action';
//util
import * as parseUrlParameter from '../../Lib/Utils/parseUrlParameter';
import { WithContext as ReactTags } from 'react-tag-input';


class EditContainer extends React.Component {

   ...

render() {
        const { tags } = this.state;
        return (
            <div className={styleArticle.articleContainer}>
                <ul className={styleArticle.articleContent}>
                    {/* image */}
                    <li>
                        <div className={styleArticle.title1}>이미지 업로드 (png, jpg)</div>
                        <div htmlFor={'upload'} className={styleArticle.uploadBox}>
                            {!this.state.imagePreview || this.state.imagePreview === '' ?
                                <div className={styleArticle.uploadImage} />
                            :
                                <img className={styleArticle.preview} src={this.state.imagePreview} />
                            }

                            <label className={styleArticle.uploadLabel} htmlFor={'upload'} />
                            <input className={styleArticle.upload} onChange={(e) => this.handleFileChange(e)}
                                   disabled={this.state.pageUrlType === 3}
                                   type={'file'} id={'upload'} accept={'image/*'}
                            />
                        </div>
                        <div className={styleArticle.uploadInputBox}>
                            <input className={styleArticle.uploadInput} type={'text'} placeholder={'이미지 이름'}
                                   disabled={true} value={this.state.imagename} />
                        </div>
                    </li>
                    {/* image sub */}
                    <li>
                        <div className={styleArticle.title1}>GIF 이미지 업로드 (gif)</div>
                        <div htmlFor={'upload'} className={styleArticle.uploadBox}>
                            {!this.state.imagePreview1 || this.state.imagePreview1 === '' ?
                                <div className={styleArticle.uploadImage} />
                                :
                                <img className={styleArticle.preview} src={this.state.imagePreview1} />
                            }
                            <label className={styleArticle.uploadLabel} htmlFor={'upload1'} />
                            <input className={styleArticle.upload} onChange={(e) => this.handleSubFileChange(e)}
                                   disabled={this.state.pageUrlType === 3}
                                   type={'file'} id={'upload1'} accept={'image/*'}
                            />
                        </div>
                        <div className={styleArticle.uploadInputBox}>
                            <input className={styleArticle.uploadInput} type={'text'} placeholder={'이미지 이름'}
                                   disabled={true} value={this.state.imagename1} />
                        </div>
                    </li>
                    {/* color */}
                    <li>
                        <div className={styleArticle.title}>배경색</div>
                        <div className={styleArticle.body}>
                            <input className={styleArticle.inputS}
                                type={'color'}
                                   value={this.state.bgcolor}
                                   onChange={(e) => this.setState({bgcolor: e.target.value})}
                                   disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/* tags */}
                    <li>
                        <div className={styleArticle.title}>키워드</div>
                        <div className={styleArticle.body}>
                            <ReactTags
                                tags={tags}
                                handleDelete={this.handleDelete}
                                handleAddition={this.handleAddition}
                                handleTagClick={this.handleTagClick}
                                placeholder={'키워드를 입력해주세요.'}
                                classNames={{
                                    tags: styleTag.tagsClass,
                                    tagInput: styleTag.tagInputClass,
                                    tagInputField: styleTag.tagInputFieldClass,
                                    selected: styleTag.selectedClass,
                                    tag: styleTag.tagClass,
                                    remove: styleTag.removeClass,
                                    suggestions: styleTag.suggestionsClass,
                                    activeSuggestion: styleTag.activeSuggestionClass
                                }}
                            />
                        </div>
                    </li>
                    {/*modifiedDate*/}
                    <li>
                        <div className={styleArticle.title}>날짜</div>
                        <div className={styleArticle.body}>
                            <input  className={styleArticle.inputS}
                                    value={this.state.modifiedDate}
                                      onChange={(e) => this.setState({modifiedDate: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                                    placeholder={'입력폼: YYYY.MM.DD'}
                            />
                        </div>
                    </li>
                    {/*writer*/}
                    <li>
                        <div className={styleArticle.title}>Words By</div>
                        <div className={styleArticle.body}>
                            <input  className={styleArticle.inputS}
                                    value={this.state.writer}
                                   onChange={(e) => this.setState({writer: e.target.value})}
                                   type={'text'}
                                   disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*illustration*/}
                    <li>
                        <div className={styleArticle.title}>Illustration By</div>
                        <div className={styleArticle.body}>
                            <input  className={styleArticle.inputS}
                                    value={this.state.illustration}
                                   onChange={(e) => this.setState({illustration: e.target.value})}
                                   type={'text'}
                                   disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/* ref */}
                    <li>
                        <div className={styleArticle.title}>참고문헌</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.ref}
                                   onChange={(e) => this.setState({ref: e.target.value})} type={'text'}
                                   disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*search*/}
                    <li>
                        <div className={styleArticle.title}>검색</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.search}
                                      onChange={(e) => this.setState({search: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*title*/}
                    <li>
                        <div className={styleArticle.title}>제목</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.title}
                                      onChange={(e) => this.setState({title: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*abstract*/}
                    <li>
                        <div className={styleArticle.title}>본문</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.abstract}
                                      onChange={(e) => this.setState({abstract: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*point1*/}
                    <li>
                        <div className={styleArticle.title}>소제목1</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.point1}
                                      onChange={(e) => this.setState({point1: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*content1*/}
                    <li>
                        <div className={styleArticle.title}>단락1</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.content1}
                                      onChange={(e) => this.setState({content1: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*point2*/}
                    <li>
                        <div className={styleArticle.title}>소제목2</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.point2}
                                      onChange={(e) => this.setState({point2: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*content2*/}
                    <li>
                        <div className={styleArticle.title}>단락2</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.content2}
                                      onChange={(e) => this.setState({content2: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*point3*/}
                    <li>
                        <div className={styleArticle.title}>소제목3</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.point3}
                                      onChange={(e) => this.setState({point3: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*content3*/}
                    <li>
                        <div className={styleArticle.title}>단락3</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.content3}
                                      onChange={(e) => this.setState({content3: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*point4*/}
                    <li>
                        <div className={styleArticle.title}>소제목4</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.point4}
                                      onChange={(e) => this.setState({point4: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*content4*/}
                    <li>
                        <div className={styleArticle.title}>단락4</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.content4}
                                      onChange={(e) => this.setState({content4: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*point5*/}
                    <li>
                        <div className={styleArticle.title}>소제목5</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.point5}
                                      onChange={(e) => this.setState({point5: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*content5*/}
                    <li>
                        <div className={styleArticle.title}>단락5</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.content5}
                                      onChange={(e) => this.setState({content5: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*point6*/}
                    <li>
                        <div className={styleArticle.title}>소제목6</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.point6}
                                      onChange={(e) => this.setState({point6: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*content6*/}
                    <li>
                        <div className={styleArticle.title}>단락6</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.content6}
                                      onChange={(e) => this.setState({content6: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*point7*/}
                    <li>
                        <div className={styleArticle.title}>소제목7</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.point7}
                                      onChange={(e) => this.setState({point7: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*content7*/}
                    <li>
                        <div className={styleArticle.title}>단락7</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.content7}
                                      onChange={(e) => this.setState({content7: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*point8*/}
                    <li>
                        <div className={styleArticle.title}>소제목8</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.point8}
                                      onChange={(e) => this.setState({point8: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*content8*/}
                    <li>
                        <div className={styleArticle.title}>단락8</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.content8}
                                      onChange={(e) => this.setState({content8: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*point9*/}
                    <li>
                        <div className={styleArticle.title}>소제목9</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.point9}
                                      onChange={(e) => this.setState({point9: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*content9*/}
                    <li>
                        <div className={styleArticle.title}>단락9</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.content9}
                                      onChange={(e) => this.setState({content9: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*point10*/}
                    <li>
                        <div className={styleArticle.title}>소제목10</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.point10}
                                      onChange={(e) => this.setState({point10: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*content10*/}
                    <li>
                        <div className={styleArticle.title}>단락10</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.content10}
                                      onChange={(e) => this.setState({content10: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*point11*/}
                    <li>
                        <div className={styleArticle.title}>소제목11</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.point11}
                                      onChange={(e) => this.setState({point11: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*content11*/}
                    <li>
                        <div className={styleArticle.title}>단락11</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.content11}
                                      onChange={(e) => this.setState({content11: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*point12*/}
                    <li>
                        <div className={styleArticle.title}>소제목12</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.point12}
                                      onChange={(e) => this.setState({point12: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*content12*/}
                    <li>
                        <div className={styleArticle.title}>단락12</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.content12}
                                      onChange={(e) => this.setState({content12: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*point13*/}
                    <li>
                        <div className={styleArticle.title}>소제목13</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.point13}
                                      onChange={(e) => this.setState({point13: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*content13*/}
                    <li>
                        <div className={styleArticle.title}>단락13</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.content13}
                                      onChange={(e) => this.setState({content13: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*point14*/}
                    <li>
                        <div className={styleArticle.title}>소제목14</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.point14}
                                      onChange={(e) => this.setState({point14: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*content14*/}
                    <li>
                        <div className={styleArticle.title}>단락14</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.content14}
                                      onChange={(e) => this.setState({content14: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*point15*/}
                    <li>
                        <div className={styleArticle.title}>소제목15</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.point15}
                                      onChange={(e) => this.setState({point15: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                    {/*content15*/}
                    <li>
                        <div className={styleArticle.title}>단락15</div>
                        <div className={styleArticle.body}>
                            <textarea value={this.state.content15}
                                      onChange={(e) => this.setState({content15: e.target.value})}
                                      disabled={this.state.pageUrlType === 3}
                            />
                        </div>
                    </li>
                </ul>
                <div className={styleArticle.btnBox}>
                    {this.state.pageUrlType === 1 ?
                        <div onClick={this.submit} className={styleArticle.btn40}>게시하기</div>
                    :
                        null
                    }
                    {this.state.pageUrlType === 2 ?
                        <div onClick={this.submit} className={styleArticle.btn40}>수정하기</div>
                        :
                        null
                    }
                    {this.state.pageUrlType === 3 ?
                        <div onClick={() => this.props.history.push('/admin/gi')} className={styleArticle.btn40}>목록으로</div>
                        :
                        null
                    }

                </div>
            </div>
        )
    }
}

export default connect((state) => {
    return {
        userAuth: state.data.auth.userAuth,
    };
})(withRouter(EditContainer));

and root.jsx

import React from 'react';
import { Route, withRouter } from 'react-router';
import { connect } from 'react-redux';
//style
import styleApp from '../Styles/App.css';

//component
import AccountComponent from '../Container/Account';
import SettingComponent from '../Container/Setting';
import HomeComponent from '../Container/Home';
import SWComponent from '../Container/SW';
import GIComponent from '../Container/GI';
import SBComponent from '../Container/SB';
import SSComponent from '../Container/SS';
import BannerComponent from '../Container/Banner'
import SideNaveComponent from '../Component/SideNav';
//action
import * as actionAccount from "../Data/Account/action";
import storage from '../Lib/Api/storage';
class RootView extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showNav: false
        }
    }
    componentWillMount() {...
    }
    shouldComponentUpdate(nextProps, nextState) {...
    }

    checkSession = (token) => {...
    }
    checkUrl = curProps => {...
    }
    handleUrl = curProps => {...
    }
    render() {
        return (
            <div className={styleApp.rootBox}>
                {this.state.showNav ?
                    <SideNaveComponent url={this.props.location.pathname} />
                :
                    <div className={styleApp.accountBox}>
                        <Route path={'/admin/signin'} exact={false} strict={false} component={AccountComponent} />
                    </div>
                }
                <div className={styleApp.contentBox}>
                    <Route path={'/admin/home'} exact={false} strict={false} component={HomeComponent} />
                    <Route path={'/admin/sw'} exact={false} strict={false} component={SWComponent} />
                    <Route path={'/admin/gi'} exact={false} strict={false} component={GIComponent} />
                    <Route path={'/admin/ss'} exact={false} strict={false} component={SSComponent} />
                    <Route path={'/admin/sb'} exact={false} strict={false} component={SBComponent} />
                    <Route path={'/admin/banner'} exact={false} strict={false} component={BannerComponent} />
                    <Route path={'/admin/setting'} exact={false} strict={false} component={SettingComponent} />
                </div>
            </div>
        )
    }
}

export default connect((state) => {
    return {
        userAuth: state.data.auth.userAuth,
    };
})(withRouter(RootView));

I searched and found many solutions and solved cases. But i don't think it's goona work for my case. I guess export is written properly and also the name 'EditContainer' too.. What are the recommended solutions in this case?