I use JQuery in my django project quite often, and it hasn't been a problem so far. Even in my current project, I use it on multiple pages. But on one page, I get this error in the console:

Uncaught ReferenceError: $ is not defined

This is my JQuery Code:

 $(document).ready(function(){

        console.log("hello")
    
        })

This is what I imported in my base.html:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>

Like I said I used JQuery a lot in this project so and it worked fine so far. I also did extend Base.html properly.

What could be the problem?

CodePudding user response：

This error might be caused by these following things:

1. You're using the slim version of jQuery, that excludes all Ajax, effects and deprecated code, I am not familiar with this package, so you might want to try the normal package
2. jQuery is loaded after your script, in your case, you might have extended a block that is contextualized before importing jQuery or maybe some JavaScript is running before the page is loaded, and before jQuery is fully loaded
3. jQuery is not loaded due to network errors or Cross-origin resource sharing, check the network panel in devtools/firebug aswell as the console for logged errors, to check if it's loaded, try calling $ in your console

Try comparing how you imported jQuery in the other working templates. Are they extensions of the same base template? Are all of your blocks correctly named? Is your script being run after jQuery is imported?