How to add Bootstrap, jQuery, and popper.js to Laravel 8 project using laravel-mix?-CodePudding

As I understand, the following commands should install Bootstrap, jQuery, and popper.js:

composer require laravel/ui
php artisan ui bootstrap
npm install && npm run dev

After running these commands I can now use Bootstrap class names, but I cannot use jQuery. When I try to add some jQuery code I get the following error: Uncaught ReferenceError: $ is not defined

I have added <script src="{{ asset('js/app.js') }}"></script> and <link href="{{ asset('css/app.css') }}" rel="stylesheet"> to the head of the document.

Am I missing something here?

Example code:

<!doctype html>
<html class="no-js" lang="da">

<head>
    <script src="{{ asset('js/app.js') }}"></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<script>
    $(document).ready(function () {
        alert(0);
    });
</script>
</body>
</html>

CodePudding user response：

Make sure there's not a defer in your <script> tag that imports app.js.

This often causes the $ is not defined error with Laravel Mix.

CodePudding user response：

<html>
   <head>


<title>Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>
</html>
<body>
    <div class="container mt-3">
      <h2>Dropdown Events</h2>
      <p>Click on the Dropdown button below.                                      <strong>event.relatedTarget</strong> returns the element which triggered the dropdown.</p>  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
  $(".dropdown").on("show.bs.dropdown", function(event){
    var x = $(event.relatedTarget).text(); // Get the button text
  });
});
</script>
</body>