1

I have read this: Uncaught ReferenceError: jQuery is not defined

Which led me to this: Uncaught ReferenceError: $ is not defined?

After understanding the problem that I was not referencing jQuery before I was using it I changed my code.

From this:

<head>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

I moved jQuery to the top like this:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>

That fixed my first Uncaught ReferenceError. I am however still getting the same error but from select2.

Uncaught ReferenceError: jQuery is not defined
    <anonymous> https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js:2
    <anonymous> https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js:2
select2.min.js:2:83

I do not know how to reference it any sooner and ever their own page shows how to setup the code.

Funlamb
  • 551
  • 7
  • 20

2 Answers2

2

It turns out I tried to use select2 in my base.html file. I never referenced jQuary there.

base.html before:

  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

And after:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

Small mistake that will hopefully save you 30 minutes of work. Check everything.

Funlamb
  • 551
  • 7
  • 20
0

I encountered the same issue, make sure you load Jquery before any scripts. You can place it on HTML head tag

Adivhaho Mavhungu
  • 384
  • 3
  • 8