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;

무엇이 잘된것일까요 ㅠㅠ

지금 하나하나씩 다 쳐보면서 따라가고잇습니다.

제가 새로운 인강버그를 발견할지는 모릅니다.!

ㅇ

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

> 30 | header: propTypes.String.isRequired,

Server Error

Source