Next.js Discord

Discord Forum

Issue with dependency

Unanswered
Chausie posted this in #help-forum
Open in Discord
ChausieOP
I'm forced to use jquery just on one page for a legacy menu a customer wants it worked a year ago but now it broke for some reason, does anyone see the issue? All I did is migrate to app folder, and yes the component where jquery is used is using use client.

 ⨯ node_modules/.pnpm/jquery@3.7.1/node_modules/jquery/dist/jquery.js (24:26) @ document
 ⨯ TypeError: Cannot read properties of undefined (reading 'document')
    at __webpack_require__ (/home/ivje/institut-fuer-bewegende-kuenste/.next/server/webpack-runtime.js:33:42)
    at eval (./components/Layout/FullscreenNav.tsx:19:64)
    at (ssr)/./components/Layout/FullscreenNav.tsx (/home/ivje/institut-fuer-bewegende-kuenste/.next/server/app/page.js:195:1)
    at __webpack_require__ (/home/ivje/institut-fuer-bewegende-kuenste/.next/server/webpack-runtime.js:33:42)
    at eval (./components/Layout/NavBar.tsx:8:72)
    at (ssr)/./components/Layout/NavBar.tsx (/home/ivje/institut-fuer-bewegende-kuenste/.next/server/app/page.js:206:1)
    at __webpack_require__ (/home/ivje/institut-fuer-bewegende-kuenste/.next/server/webpack-runtime.js:33:42)
    at eval (./app/page.tsx:12:83)
    at (ssr)/./app/page.tsx (/home/ivje/institut-fuer-bewegende-kuenste/.next/server/app/page.js:162:1)
    at __webpack_require__ (/home/ivje/institut-fuer-bewegende-kuenste/.next/server/webpack-runtime.js:33:42)
    at JSON.parse (<anonymous>)

7 Replies

Siberian Flycatcher
Hi 👋
Can you show the code of the component that uses jQuery?
ChausieOP
import $ from 'jquery'

export function SplitNav() {
  useEffect(() => {
    // jquery code that worked before...
  }, [])
}
I mean to be more precise the code still works but the message does not go away from the console
Siberian Flycatcher
Interesting... and you have "use client" in this file, right?
I can only reproduce the error by removing "use client"
ChausieOP
yep I have use client weird...
Siberian Flycatcher
Is it possible by any chance that you have additional jQuery use outside of useEffect somewhere?

BTW, you can always hotfix this by importing the component dynamically with disabled SSR

import dynamic from 'next/dynamic'

const ComponentThatUsesJQuery = dynamic(() => import('../component'), { ssr: false })

function Page() {
  return (
    <ComponentThatUsesJQuery />
  )
}


However, if you only execute jQuery inside an effect, you shouldn't have this error in the first place.