I created a server side rendered react website with next.js. I wanted to add a simple event listener to header for it to appear-disappear on scroll. In order to do it i have to import useState and useEffect. In order to do it, I have to render the header client side.
I had "TypeError: Cannot read properties of undefined (reading 'call')" trying to make the header render on the client side with writing "use client" on top of my header js file. I tried to debug it by looking through the js files that causing the error but since I have very little experience with node and react, I didn't understand anything. Can someone help me solve this problem? The callstack is as follows:
Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'call')
Call Stack
options.factory
file:///C:/Users/TheUser/Desktop/website_project/.next/static/chunks/webpack.js (716:31)
_webpack_require_
file:///C:/Users/TheUser/Desktop/website_project/.next/static/chunks/webpack.js (37:33)
fn
file:///C:/Users/TheUser/Desktop/website_project/.next/static/chunks/webpack.js (371:21)
requireModule
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js (156:22)
initializeModuleChunk
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js (1357:0)
readChunk
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js (1167:0)
mountLazyComponent
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (16540:0)
beginWork$1
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (18260:0)
beginWork
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (26647:0)
performUnitOfWork
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (25493:0)
workLoopConcurrent
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (25479:0)
renderRootConcurrent
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (25435:0)
performConcurrentWorkOnRoot
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24288:0)
workLoop
node_modules\next\dist\compiled\scheduler\cjs\scheduler.development.js (261:0)
flushWork
node_modules\next\dist\compiled\scheduler\cjs\scheduler.development.js (230:0)
MessagePort.performWorkUntilDeadline
node_modules\next\dist\compiled\scheduler\cjs\scheduler.development.js (534:0)