인프런 커뮤니티 질문&답변
작성한 질문수
antd적용 후 새로고침 or 서버 재시작시 에러가 납니다.
작성
·
1.3K
0
서버 켜져있는 상태에서 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작성한 부분입니다!
프로젝트에서 터미널에
npm ls antd
npm ls react
npm ls react-dom
해서 각각 나오는 버전 올려주세요. 제 눈에 오타는 못 찾겠어서 오타가 없다면 버전 관련 버그로 보이긴 합니다.
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
실행 결과입니다.
렛츠기릿 자바스크립트 같이 듣고있어서 확인이 좀 늦었네요 ㅜㅜ
