Next.js Discord

Discord Forum
\n \n I'm seeing that one part of the codeuseEffect(() => {\n $('#foo').click(function () {\n console.log('click');\n alert('click');\n }\n}, [])issues an error ReferenceError: $ is not defined but when I go into the console of the browser, $ is defined. There are a few other things that seem to depend on the availability of $ like the bootstrap and ace scripts I've imported. This is the problem I'd like to solve before I can start transitioning to using React components that have been made to wrap around the scripts with no issues. thank you.","dateCreated":"2024-07-14T20:07:47.547Z","answerCount":10,"author":{"@type":"Person","name":"Alligator mississippiensis"},"acceptedAnswer":{"@type":"Answer","text":"'use client';\n\nimport Link from 'next/link';\nimport { useEffect } from 'react';\nimport $ from 'jquery';\n\nexport default function Page() {\n useEffect(() => {\n $('body').css('background-color', 'orange');\n }, []);\n return (\n
\n Home\n About\n Test two\n

TEST TWO

\n
\n );\n}works","url":"https://nextjs-forum.com/post/1262138498941587487#message-1262171552829673523","dateCreated":"2024-07-14T22:19:08.208Z","author":{"@type":"Person","name":"Velvet ant"},"upvoteCount":1}}}

how to fix timing of availability of jQuery $ in nextjs app router

Answered
Alligator mississippiensis posted this in #help-forum
Open in Discord
Alligator mississippiensisOP
hello. I'm trying to slowly convert a CRA project into a Nextjs one and I imported a few third party scripts using the Script tag like so:
        <Script
          src="https://code.jquery.com/jquery-3.7.1.min.js"
          integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
          crossOrigin="anonymous"
        ></Script>
        <Script
          src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
          integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
          crossOrigin="anonymous"
        ></Script>
        <Script
          type="text/javascript"
          src="https://github.com/ajaxorg/ace-builds/blob/master/src-min-noconflict/ace.js"
        ></Script>

I'm seeing that one part of the code
useEffect(() => {
    $('#foo').click(function () {
      console.log('click');
      alert('click');
    }
}, [])

issues an error ReferenceError: $ is not defined but when I go into the console of the browser, $ is defined. There are a few other things that seem to depend on the availability of $ like the bootstrap and ace scripts I've imported. This is the problem I'd like to solve before I can start transitioning to using React components that have been made to wrap around the scripts with no issues. thank you.
Answered by Velvet ant
'use client';

import Link from 'next/link';
import { useEffect } from 'react';
import $ from 'jquery';

export default function Page() {
  useEffect(() => {
    $('body').css('background-color', 'orange');
  }, []);
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/test-two">Test two</Link>
      <h1 className="bg-slate-800 text-green-400">TEST TWO</h1>
    </main>
  );
}

works
View full answer

10 Replies

ASittingDuck
So you are running two calls for document or dom readiness. The problem is the Jquery asks the client for that, where useEffect uses app specific logic. The problem is that $ will not be called because its not even looked at with the DOM relookup.
@ASittingDuck So you are running two calls for document or dom readiness. The problem is the Jquery asks the client for that, where useEffect uses app specific logic. The problem is that $ will not be called because its not even looked at with the DOM relookup.
Alligator mississippiensisOP
are you saying that this is happening in the code that I referenced or that these calls are just made in general in nextjs or something else altogether? what is doing the looking for $? All of this was working just fine before the migration from CRA
ASittingDuck
TLDR $ will not be available in useEffect ever
Alligator mississippiensisOP
oh yeah. I should've specified that this was working in one of the lifecycle methods in a class component. thanks for clarifying. I'm not sure if it's even available when kept as a class component. I'll test that out. I feel like this might be a nextjs specific thing?
ASittingDuck
As a general rule I am sure you already know, but jquery and node really aren't built to be mixed either
Velvet ant
did you try installing jquery via npm ? it seems to be working
@Velvet ant did you try installing jquery via npm ? it seems to be working
Alligator mississippiensisOP
I haven't! Let me try that instead
Velvet ant
'use client';

import Link from 'next/link';
import { useEffect } from 'react';
import $ from 'jquery';

export default function Page() {
  useEffect(() => {
    $('body').css('background-color', 'orange');
  }, []);
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/test-two">Test two</Link>
      <h1 className="bg-slate-800 text-green-400">TEST TWO</h1>
    </main>
  );
}

works
Answer
Velvet ant
if you use ts pnpm install @types/jquery -D
@Velvet ant if you use ts `pnpm install @types/jquery -D`
Alligator mississippiensisOP
this gets me closer. thank you very much! there seems to be another issue where I'm now getting $.material.init(); is undefined, which I'm going to take as a win since the other error went away