antd적용 후 새로고침 or 서버 재시작시 에러가 납니다.
1323
작성한 질문수 8
서버 켜져있는 상태에서 antd.css 임포트 시키고,
태그들도 <Menu.Item>으로 묶어주었습니다.
저장하면 css가 잘 적용되어 나오는데 그 후, 새로고침이나
서버 재시작하면 아래와 같이 에러가 표기됩니다.
react 버전이 문제인지 잘 모르겠습니다..
useContext ... 현재 hooks 사용한 부분은 없는데 왜 이런 문구가 나오는지 모르겠습니다 ㅠㅠ
혹시몰라 작성한 모든 코드들은 맨 아래에 첨부합니다.
현재 사용하고 있는 버전은 아래와 같습니다.
[브라우저에 표시되는 에러]
Server Error
TypeError: Cannot read properties of null (reading 'useContext')
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Object.useContext
file:///Users/jeondaewon/WebstormProjects/react-nodebird/node_modules/react/cjs/react.development.js (1618:21)
<unknown>
file:///Users/jeondaewon/WebstormProjects/react-nodebird/node_modules/antd/lib/menu/index.js (43:24)
renderWithHooks
file:///Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5658:16)
renderForwardRef
file:///Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5842:18)
renderElement
file:///Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6005:11)
....
[터미널 에러 로그]
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
error - TypeError: Cannot read properties of null (reading 'useContext')
at Object.useContext (/Users/jeondaewon/WebstormProjects/react-nodebird/node_modules/react/cjs/react.development.js:1618:21)
at /Users/jeondaewon/WebstormProjects/react-nodebird/node_modules/antd/lib/menu/index.js:43:24
at renderWithHooks (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
at renderForwardRef (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5842:18)
at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6005:11)
at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
at renderContextConsumer (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5906:3)
at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6023:11)
at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
at finishClassComponent (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5688:3)
at renderClassComponent (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5696:3)
at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5943:7)
at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
at renderNode (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
at renderChildrenArray (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
at renderNode (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
at renderHostElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5)
at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
at renderIndeterminateComponent (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
at renderIndeterminateComponent (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
at renderIndeterminateComponent (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
at renderIndeterminateComponent (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
at renderNode (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
at renderChildrenArray (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5971:9)
at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
at renderNode (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
at renderChildrenArray (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7) {
page: '/'
}
[소스코드]
답변 1
0
메뉴 쓴 부분을 보여주셔야하지 않을까요
Menu작성한 부분입니다!0
프로젝트에서 터미널에
npm ls antd
npm ls react
npm ls react-dom
해서 각각 나오는 버전 올려주세요. 제 눈에 오타는 못 찾겠어서 오타가 없다면 버전 관련 버그로 보이긴 합니다.
0
react-nodebird@ /Users/jeondaewon/WebstormProjects/react-nodebird
└── antd@4.24.6
jeondaewon@jeondaewon-ui-Mac-Studio react-nodebird % npm ls react
react-nodebird@ /Users/jeondaewon/WebstormProjects/react-nodebird
├─┬ @ant-design/icons@4.8.0
│ ├─┬ rc-util@5.27.1
│ │ └── react@18.2.0 deduped
│ └── react@18.2.0 deduped
├─┬ antd@4.24.6
│ ├─┬ @ant-design/react-slick@0.29.2
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-cascader@3.7.0
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-checkbox@2.3.2
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-collapse@3.4.2
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-dialog@9.0.2
│ │ ├─┬ @rc-component/portal@1.1.0
│ │ │ └── react@18.2.0 deduped
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-drawer@6.1.2
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-dropdown@4.0.1
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-field-form@1.27.3
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-image@5.13.0
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-input-number@7.3.11
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-input@0.1.4
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-mentions@1.13.1
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-menu@9.8.1
│ │ ├─┬ rc-overflow@1.2.8
│ │ │ └── react@18.2.0 deduped
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-motion@2.6.2
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-notification@4.6.1
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-pagination@3.2.0
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-picker@2.7.0
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-progress@3.4.1
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-rate@2.9.2
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-resize-observer@1.2.1
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-segmented@2.1.0
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-select@14.1.16
│ │ ├─┬ rc-virtual-list@3.4.13
│ │ │ └── react@18.2.0 deduped
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-slider@10.0.1
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-steps@5.0.0
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-switch@3.2.2
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-table@7.26.0
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-tabs@12.4.2
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-textarea@0.4.7
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-tooltip@5.2.2
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-tree-select@5.5.5
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-tree@5.7.2
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-trigger@5.3.4
│ │ ├─┬ rc-align@4.0.15
│ │ │ └── react@18.2.0 deduped
│ │ └── react@18.2.0 deduped
│ ├─┬ rc-upload@4.3.4
│ │ └── react@18.2.0 deduped
│ └── react@18.2.0 deduped
├─┬ next@12.3.4
│ ├── react@18.2.0 deduped
│ ├─┬ styled-jsx@5.0.7
│ │ └── react@18.2.0 deduped
│ └─┬ use-sync-external-store@1.2.0
│ └── react@18.2.0 deduped
├─┬ react-dom@18.2.0
│ └── react@18.2.0 deduped
├── react@18.2.0
└─┬ styled-components@5.3.6
└── react@18.2.0 deduped
jeondaewon@jeondaewon-ui-Mac-Studio react-nodebird % npm ls react-dom
react-nodebird@ /Users/jeondaewon/WebstormProjects/react-nodebird
├─┬ @ant-design/icons@4.8.0
│ ├─┬ rc-util@5.27.1
│ │ └── react-dom@18.2.0 deduped
│ └── react-dom@18.2.0 deduped
├─┬ antd@4.24.6
│ ├─┬ rc-cascader@3.7.0
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-checkbox@2.3.2
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-collapse@3.4.2
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-dialog@9.0.2
│ │ ├─┬ @rc-component/portal@1.1.0
│ │ │ └── react-dom@18.2.0 deduped
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-drawer@6.1.2
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-dropdown@4.0.1
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-field-form@1.27.3
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-image@5.13.0
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-input-number@7.3.11
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-input@0.1.4
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-mentions@1.13.1
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-menu@9.8.1
│ │ ├─┬ rc-overflow@1.2.8
│ │ │ └── react-dom@18.2.0 deduped
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-motion@2.6.2
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-notification@4.6.1
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-pagination@3.2.0
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-picker@2.7.0
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-progress@3.4.1
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-rate@2.9.2
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-resize-observer@1.2.1
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-segmented@2.1.0
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-select@14.1.16
│ │ ├─┬ rc-virtual-list@3.4.13
│ │ │ └── react-dom@18.2.0 deduped
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-slider@10.0.1
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-steps@5.0.0
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-switch@3.2.2
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-table@7.26.0
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-tabs@12.4.2
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-textarea@0.4.7
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-tooltip@5.2.2
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-tree-select@5.5.5
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-tree@5.7.2
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-trigger@5.3.4
│ │ ├─┬ rc-align@4.0.15
│ │ │ └── react-dom@18.2.0 deduped
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-upload@4.3.4
│ │ └── react-dom@18.2.0 deduped
│ └── react-dom@18.2.0 deduped
├─┬ next@12.3.4
│ └── react-dom@18.2.0 deduped
├── react-dom@18.2.0
└─┬ styled-components@5.3.6
└── react-dom@18.2.0 deduped
말씀해주신 버전 정보들입니다.
npm ls antd
npm ls react
npm ls react-dom
실행 결과입니다.
렛츠기릿 자바스크립트 같이 듣고있어서 확인이 좀 늦었네요 ㅜㅜ
넥스트 버젼 질문
0
78
2
로그인시 401 Unauthorized 오류가 뜹니다
0
89
1
무한 스크롤 중 스크롤 튐 현상
0
175
1
특정 페이지 접근을 막고 싶을 때
0
103
2
createGlobalStyle의 위치와 영향범위
0
96
2
인라인 스타일 리렌더링 관련
0
91
2
vsc 에서 npm init 설치시 오류
0
146
2
nextjs 15버전 사용 가능할까요?
0
158
1
화면 새로고침 문의
0
121
1
RTK에서 draft, state 차이가 있나요?
0
153
2
Next 14 사용해도 될까요?
0
452
1
next, node 버전 / 폴더 구조 질문 드립니다.
0
349
1
url 오류 질문있습니다
0
211
1
ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out
0
373
1
sudo certbot --nginx 에러
0
1275
2
Minified React error 콘솔에러 (hydrate)
0
470
1
카카오 공유했을 때 이전에 작성했던 글이 나오는 버그
0
247
1
프론트서버 배포 후 EADDRINUSE에러 발생
0
327
1
npm run build 에러
0
518
1
front 서버 npm run build 중에 발생한 에러들
0
382
1
서버 실행하고 브라우저로 들어갔을때 404에러
0
338
2
css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.
0
288
1
팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.
0
239
2
해시태그 검색에서 throttle에 관해 질문있습니다.
0
201
1