Why there is an error showing when I try to load the slider in the browser?

Question

I have save the code in slider.js. But when in the browser the slider is not working. It is showing the error

Uncaught ReferenceError: $ is not defined.

But I'm seeing the result of the console.log("ready") inside the $(document).ready(...) handler here:

Jquery code

$( document ).ready(function() {
  console.log('ready'); // <===== I'm seeing this
    $('.logo-carousel').slick({
      slidesToShow: 6,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 1000,
      arrows: true,
      dots: false,
      pauseOnHover: false,
      responsive: [{
        breakpoint: 768,
        settings: {
          slidesToShow: 4
        }
      }, {
        breakpoint: 520,
        settings: {
          slidesToShow: 2
        }
      }]
    });
});

Error

Uncaught ReferenceError: $ is not defined
    at Slider.js:1:3

No! Because the document.ready function is working and it also print 'ready' in console.But it is still throwing the error $ is not defined. — Sarkar, May 23 '22 at 09:09
@Sarkar - Is the code above wrapped in anything, or is it at global scope? And are you doing this on Wordpress? — T.J. Crowder, May 23 '22 at 09:13
does this solve your issue https://stackoverflow.com/questions/2194992/jquery-is-not-defined — Faizal Hussain, May 23 '22 at 09:14
In the console works because Google Chrome aliases `document.querySelector` as `$` :) but you are missing JQuery — Christian Vincenzo Traina, May 23 '22 at 09:17
@CristianTraìna - The OP says they're seeing the result of the `console.log("ready")` in the `$(document).ready(...)` function. — T.J. Crowder, May 23 '22 at 09:18
@T.J.Crowder Right! So I suppose that OP opened the console in a webpage where JQuery was loaded — Christian Vincenzo Traina, May 23 '22 at 09:20
@CristianTraìna - It's code in the script, not something they typed in the console. — T.J. Crowder, May 23 '22 at 09:20
In a previous edit, OP had said that `in console "ready" is showing`, so I was attempting to explain why the behaviour was different :) — Christian Vincenzo Traina, May 23 '22 at 09:23
@CristianTraìna - I think they were referring to that line of code. :-) English is clearly not their first language. — T.J. Crowder, May 23 '22 at 09:24
it's saying the $ is undefined in your slider.js file so did you include that file before you included the jquery file? Please can you show the code where you include your scripts — Pete, May 23 '22 at 10:32

T.J. Crowder · Answer 1 · 2022-05-23T11:11:47.333

Assuming the code you've shown is at global scope, I can only think of three possibilities:

You've included Sliders.js before including jQuery and the code you've shown in the question.
You're using an iframe and loading Slider.js into it, but jQuery isn't loaded in that iframe; your code is in the main document (or a different iframe) where jQuery is loaded, so it has $ but the iframe with Slider.js doesn't. Remember an iframe is a completely different window from the window containing it. If you want to use jQuery in that iframe, you have to load it in that iframe.

(This seems unlikely) Code running after your code is doing this:

$.noConflict(); // This part is optional but likely to be there
delete $;       // This causes the specific error you're seeing

#1 is the most likely scenario, followed by #2; #3 is possible but unlikely.

I won't do an example of #2 because it's awkward with Stack Snippets, but here's an example of #1:

<script><!-- This is Slider.js -->
$(document).on("click", ".slider", function() {
    // ...
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(() => {
    console.log("ready");
});
</script>

And here's an example of #3:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(() => {
    console.log("ready1");
});
</script>
<script>
$.noConflict(); // This is optional but likely to be there
delete $;       // This causes the specific error you're seeing
</script>
<script>
$(document).ready(() => {
    console.log("ready2");
});
</script>

Notice we see ready1 but get an error instead of seeing ready2.

If the code following your code only did $.noConflict(), you'd still get an error, but it would be a different one ("$ is not a function). So something is actually removing the $ property from the window object (via delete $ or similar).

Side note: $(document).ready(someFunction) has been deprecated for some time now, details here. Use $(someFunction) instead if you really need to ask jQuery to wait for the DOMContentLoaded event, or better yet use modules (they won't be run until the main parsing of the HTML is completely), or defer on your script tag, or put your script tag at the very end of the document. (But there are times you don't control the script tag, and in those situations $(someFunction) can be useful.)

Why there is an error showing when I try to load the slider in the browser?

1 Answers1