-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
미니 블로그 질문입니다.
23.08.20 12:32 작성 23.08.20 12:47 수정 조회수 381
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)
답변을 작성해보세요.
0
metlin
질문자2023.08.20
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;
답변 1