인프런 커뮤니티 질문&답변

작성한 질문수

처음 만난 리액트(React)

미니 블로그 질문입니다.

작성

·

545

·

수정됨

0

미니블로그를 실행시키면 아래와 같은 에러가 브라우저 콘솔에 찍힙니다.

소스는 몇 번을 확인해서 잘 못 된 부분이 없다고 생각합니다.

MainPage.jsx 부터 불러오질 못하네요.

뭐가 잘 못 됐는지 찾아주시면 고맙겠습니다.

아래는 App.js 에 PostWritePage, PostViewPage 를 빼고 실행했을 경우 브라우저 페이지 자체에 나오는 에러입니다.

function App(props) {
  return (
    <BrowserRouter>
      <MainTitleText>제플리카의 미니 블로그</MainTitleText>
      <Routes>
        <Route index element={<MainPage />} />
      </Routes>
    </BrowserRouter>
  );
}

Uncaught runtime errors:

×

ERROR

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 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 MainPage. Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 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 MainPage. at createFiberFromTypeAndProps (http://localhost:3000/static/js/bundle.js:36883:21) at createFiberFromElement (http://localhost:3000/static/js/bundle.js:36904:19) at createChild (http://localhost:3000/static/js/bundle.js:25473:32) at reconcileChildrenArray (http://localhost:3000/static/js/bundle.js:25713:29) at reconcileChildFibers (http://localhost:3000/static/js/bundle.js:26055:20) at reconcileChildren (http://localhost:3000/static/js/bundle.js:28987:32) at updateHostComponent (http://localhost:3000/static/js/bundle.js:29631:7) at beginWork (http://localhost:3000/static/js/bundle.js:31076:18) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:16062:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:16106:20)

ERROR

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 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 MainPage. Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 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 MainPage. at createFiberFromTypeAndProps (http://localhost:3000/static/js/bundle.js:36883:21) at createFiberFromElement (http://localhost:3000/static/js/bundle.js:36904:19) at createChild (http://localhost:3000/static/js/bundle.js:25473:32) at reconcileChildrenArray (http://localhost:3000/static/js/bundle.js:25713:29) at reconcileChildFibers (http://localhost:3000/static/js/bundle.js:26055:20) at reconcileChildren (http://localhost:3000/static/js/bundle.js:28987:32) at updateHostComponent (http://localhost:3000/static/js/bundle.js:29631:7) at beginWork (http://localhost:3000/static/js/bundle.js:31076:18) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:16062:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:16106:20)

ERROR

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 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 MainPage. Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 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 MainPage. at createFiberFromTypeAndProps (http://localhost:3000/static/js/bundle.js:36883:21) at createFiberFromElement (http://localhost:3000/static/js/bundle.js:36904:19) at createChild (http://localhost:3000/static/js/bundle.js:25473:32) at reconcileChildrenArray (http://localhost:3000/static/js/bundle.js:25713:29) at reconcileChildFibers (http://localhost:3000/static/js/bundle.js:26055:20) at reconcileChildren (http://localhost:3000/static/js/bundle.js:28987:32) at updateHostComponent (http://localhost:3000/static/js/bundle.js:29631:7) at beginWork (http://localhost:3000/static/js/bundle.js:31076:18) at beginWork$1 (http://localhost:3000/static/js/bundle.js:36015:18) at performUnitOfWork (http://localhost:3000/static/js/bundle.js:35284:16)

HTML/CSS javascript react

답변 1

0

Inje Lee (소플)

지식공유자

안녕하세요, 소플입니다.

혹시 MainPage 소스 코드를 첨부해주실 수 있을까요?

감사합니다.

질문자

import React from "react";
import {useNavigate} from "react-router-dom";
import styled from "styled-components";
import PostList from "../list/PostList";
import Button from "../ui/Button";
import data from "../../data.json";

const Wrapper = styled.div`
    padding: 16px;
    width: calc(100% - 32px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
`;

const Container = styled.div`
    width: 100%;
    max-width: 720px;

    & > * {
        :not(:last-child) {
            margin-bottom: 16px;
        }
    }
`;

function MainPage(props) {
    const {} = props;

    const navigate = useNavigate();

    return (
        <Wrapper>
            <Container>
                <Button 
                    title="글 작성하기" 
                    onClick={() => {
                        navigate("/post-write");
                    }} 
                />

                <PostList 
                    posts={data}
                    onClickItem={(item) => {
                        navigate(`/post/${item.id}`);
                    }}
                />                    
            </Container>
        </Wrapper>
    );
}

export default MainPage;

질문자

저 고친거 정말 없거든요.

근데 밥먹고 다시 들어와서 컴터 키고 해봤는데 됐습니다.

정말 고친거 없는데 정말 됐습니다.

암튼 고맙습니다.

Inje Lee (소플)

지식공유자

아 어찌됐든 해결되셨다니 다행이네요ㅎㅎ

화이팅하세요~!

작성한 질문수