While going to route / or /news in terminal this error occurs (this is a next.js project)
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.
TypeError: Cannot read properties of null (reading 'useContext')
at Object.useContext (/media/jahid/SSD Remaining/Running
Projects/WEB/Youtube/Next.js Crash Course for Beginners 2021 - Learn NextJS from Scratch in this 100% Free Tutorial/1/nextjs-course/node_modules/react/cjs/react.development.js:1616:21)
at Head (/media/jahid/SSD Remaining/Running Projects/WEB/Youtube/Next.js Crash Course for Beginners 2021 - Learn NextJS from Scratch in this 100% Free Tutorial/1/nextjs-course/node_modules/next/dist/shared/lib/head.js:176:34)
at renderWithHooks (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5471:16)
at renderIndeterminateComponent (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5544:15)
at renderElement (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5759:7)
at renderNodeDestructive (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5898:11)
at renderNode (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6030:12)
at renderChildrenArray (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5986:7)
at renderNodeDestructive (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5918:7)
at renderNode (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6030:12)
While in console it occurs
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
:3001/:1 GET http://localhost:3001/_next/static/chunks/fallback/webpack.js?ts=1653469342780 net::ERR_ABORTED 500 (Internal Server Error)
:3001/:1 GET http://localhost:3001/_next/static/chunks/fallback/main.js?ts=1653469342780 net::ERR_ABORTED 500 (Internal Server Error)
:3001/:1 GET http://localhost:3001/_next/static/chunks/fallback/pages/_app.js?ts=1653469342780 net::ERR_ABORTED 500 (Internal Server Error)
:3001/:1 GET http://localhost:3001/_next/static/chunks/fallback/pages/_error.js?ts=1653469342780 net::ERR_ABORTED 500 (Internal Server Error)
:3001/:1 GET http://localhost:3001/_next/static/chunks/fallback/react-refresh.js?ts=1653469342780 net::ERR_ABORTED 500 (Internal Server Error)
:3001/favicon.ico:1 GET http://localhost:3001/favicon.ico 500 (Internal Server Error)
index.js
export default function HomePage() {
return <h1>The Home Page</h1>
}
news.js
export default function NewsPage() {
return <h1>The News Page</h1>
}