-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
> 30 | header: propTypes.String.isRequired,
22.12.16 00:47 작성 조회수 378
0
http://localhost:3000/profile 누르면 나오는 문구
1 of 1 unhandled error
Server Error
ReferenceError: propTypes is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
components\FollowList.js (30:12) @ propTypes
28 |
29 | FollowList.propTypes ={
> 30 | header: propTypes.String.isRequired,
| ^
31 | data: propTypes.arry.isRequired,
32 | };
33 |
vscode터미널 상황
error - components\FollowList.js (30:12) @ propTypes
error - ReferenceError: propTypes is not defined
at eval (webpack-internal:///./components/FollowList.js:65:13)
at Object../components/FollowList.js (D:\react-zero\front\.next\server\pages\profile.js:88:1)
at __webpack_require__ (D:\react-zero\front\.next\server\webpack-runtime.js:33:42)
at eval (webpack-internal:///./pages/profile.js:13:80)
at Object../pages/profile.js (D:\react-zero\front\.next\server\pages\profile.js:308:1)
PS D:\react-zero\front> npm run dev
npm WARN cli npm v9.1.3 does not support Node.js v16.0.0. You should probably upgrade to a
npm WARN cli newer version of node as we can't make any promises that npm will work with this
npm WARN cli version. This version of npm supports the following node versions: `^14.17.0 ||
npm WARN cli ^16.13.0 || >=18.0.0`. You can find the latest version at https://nodejs.org/.
> react-zero@1.0.0 dev
> next
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 825 ms (171 modules)
wait - compiling / (client and server)...
event - compiled client and server successfully in 1077 ms (1210 modules)
Warning: [antd: Menu] `children` will be removed in next major version. Please use `items` instead.
Warning: MenuItem should not leave undefined `key`.
wait - compiling /_error (client and server)...
event - compiled client and server successfully in 410 ms (1211 modules)
warn - Fast Refresh had to perform a full reload due to a runtime error.
wait - compiling /profile (client and server)...
event - compiled client and server successfully in 889 ms (2691 modules)
error - components\FollowList.js (30:12) @ propTypes
error - ReferenceError: propTypes is not defined
at eval (webpack-internal:///./components/FollowList.js:65:13)
at Object../components/FollowList.js (D:\react-zero\front\.next\server\pages\profile.js:88:1)
at __webpack_require__ (D:\react-zero\front\.next\server\webpack-runtime.js:33:42)
at eval (webpack-internal:///./pages/profile.js:13:80)
at Object../pages/profile.js (D:\react-zero\front\.next\server\pages\profile.js:308:1)
at __webpack_require__ (D:\react-zero\front\.next\server\webpack-runtime.js:33:42)
at __webpack_exec__ (D:\react-zero\front\.next\server\pages\profile.js:702:39)
at D:\react-zero\front\.next\server\pages\profile.js:703:28
at Object.<anonymous> (D:\react-zero\front\.next\server\pages\profile.js:706:3)
at Module._compile (node:internal/modules/cjs/loader:1108:14) {
page: '/profile'
}
28 |
29 | FollowList.propTypes ={
> 30 | header: propTypes.String.isRequired,
| ^
31 | data: propTypes.arry.isRequired,
32 | };
33 |
profile.js
import Head from 'next/head';
import React from 'react';
import AppLayout from '../components/AppLayout';
import NicknameEditForm from '../components/NicknameEdit';
import FollowList from '../components/FollowList';
const Profile = () => {
const followerList = [{nickname: '제로초'}, { nickname: '바보'}, {nickname: '노드버드오피셜'} ];
const followingList = [{nickname: '제로초'}, { nickname: '바보'}, {nickname: '노드버드오피셜'} ];
return (
<>
<Head>
<title>프로필 | NodeBrid</title>
</Head>
<AppLayout>
내 프로필
<NicknameEditForm/>
<FollowList header="팔로잉 목록" data={follwingList}/>
<FollowList header="팔로워 목록" data={follwerList}/>
</AppLayout>
</>
);
};
export default Profile;
follwerlist.js
import React from 'react';
import {Button, Card, List} from 'antd';
import PropTypes from 'prop-types';
import { StopOutlined } from '@ant-design/icons';
const FollowList = ({ header, data }) =>{
return(
<List
style={{ marginBottom:20}}
grid={{ gutter:4, xs: 2, md: 3}}
size="small"
header={<div>{header}</div>}
loadMore={<div style={ {textAlign: 'center', margin: '10px 0' } }><Button>더 보기</Button></div>}
bordered
dataSource={data}
renderItem={(item) => (
<List.Item style={ {marginTop: 20} }>
<Card actions= {[<StopOutlined key='stop'/>]}>
<Card.Meta description={item.nickname} />
</Card>
</List.Item>
)}
/>
);
};
FollowList.propTypes ={
header: propTypes.String.isRequired,
data: propTypes.arry.isRequired,
};
export default FollowList;
무엇이 잘된것일까요 ㅠㅠ
지금 하나하나씩 다 쳐보면서 따라가고잇습니다.
제가 새로운 인강버그를 발견할지는 모릅니다.!
!
ㅇ
답변을 작성해보세요.
0
0
답변 2